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

如果您的动画仅基于 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 回答
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 回答