1

このボックスをアニメーション化するのに苦労しているので、変更はスムーズに進みますが、すべてをまとめる方法がわかりません。助けていただければ幸いです。（すでに「switchClass」で試しました）コード全体は次のとおりです。

<script src="jquery.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<style>
#box {
    position: relative;
    margin: auto;
    padding: auto;
    display: block;
    width: 167px;
    height: 167px;
}
#box .item {
    position: relative;
    margin: 0;
    display: block;
    width: 100%;
    height: 33%;
    cursor: pointer;
}
#box .over {
    height: 84%;
}
#box .other {
    height: 8%;
}
#top {
    background: red;
}
#mid {
    background: green;
}
#bot {
    background: blue;
}
</style>
<script>
function anim(item) {
    $('.item').attr('class', 'item other');
    $('#' + item.id).attr('class', 'item over');
}

function clean() {
    $('.item').attr('class', 'item');
}
</script>
<div id='box' onmouseout="clean()">
    <div id='top' class='item' onmouseover='anim(this)'></div>
    <div id='mid' class='item' onmouseover='anim(this)'></div>
    <div id='bot' class='item' onmouseover='anim(this)'></div>
</div>

編集: このコードは正常に実行されていますが、最終的な出力の例にすぎません (必要なアニメーションがいくつかあります)。

4

3 に答える 3

1

たぶんこれはあまりクールではありませんが、仕事をしているようです：

var $items = $('.item').on({
    mouseover: function () {
        $items.removeClass('over other');
        $items.stop().filter(this).animate({height: '84%'}, function () {
            $(this).addClass('over');
        })
        .end().not(this).animate({height: '8%'}, function () {
            $(this).addClass('other');
        });
    },
    reset: function() {
        $items.removeClass('over other').stop().animate({height: '33%'});
    }
});

$('#box').mouseout(function() {
    $items.trigger('reset');
});

http://jsfiddle.net/dfsq/4vnkh/1/

于 2013-02-28T13:31:24.370 に答える
1

アニメーションが CSS クラス属性のみに基づいている場合、CSS3 ホバー疑似セレクターを使用しないのはなぜですか?

例：

.box {
    width: 200px;
}

.box:hover {
    width: 400px;
}

<div class="box">Hover over me!</div>

追加: コメントへの対応

カスタム アニメーションの長さを探している場合は、最初の関数呼び出しの持続時間を持つコールバック関数を使用できます。次に例を示します。

$('#div').animate({
   width: '200px',
   color: 'blue'
}, 5000, function() {
   // Animation finished after 5 seconds.
   alert("Animation complete!");
});

追加＃2

あなたの問題児はこの小さな男です：

$('.item').attr('class', 'item other');

これにより、各ボックスの高さが 8% に設定され、次に主要なアニメーション ボックスが拡張されます。これを削除すると、#box はすべてのアニメーションで同じ高さになります!

于 2013-02-28T13:15:08.430 に答える
1

変化をアニメートしたい場合は、jQuery animateをご覧ください。

このようなもの：

$('.item').mouseenter(function() {
 $('.item').animate({
    height: 80%
  }, 500, function() {
    // Animation complete.
  });
});

$('.item').mouseleave(function() {
  $('.item').animate({
    height: 33%
  }, 500, function() {
    // Animation complete.
  });
});

この場合、必要ないonmouseoutか、onmouseover

于 2013-02-28T13:22:48.440 に答える