Question

我很难设法动画这个框，所以变化很顺利，但我无法弄清楚如何将所有内容保持在一起。帮助将非常感激。（已经尝试过'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>

编辑：这段代码运行得很好，但它只是最终输出的一个例子（只需要一些动画）

Answer 1

如果您的动画完全基于CSS类属性，为什么不使用CSS3 hover伪选择器？

示例：

.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将在所有动画中保持相同的高度！

Answer 2

如果您想为更改设置动画，请查看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

Answer 3

也许这不是很酷，但似乎做得很好：

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/

通过切换类来动画化多个div

3 个答案:

附加：对评论的回应

加法＃2