我很难为该框设置动画,因此更改进行得很顺利,但是我无法弄清楚如何将所有内容组合在一起。帮助将不胜感激。 (已经使用'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>


编辑:此代码运行正常,但仅是最终输出的示例(仅需要一些动画)

最佳答案

也许这不是超级酷,但似乎可以做到:

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/

关于javascript - 通过切换其类别为多个div设置动画,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/15136417/

10-12 12:47
查看更多