Question

当鼠标超过一个范围。测试时，它会滑动一个div .frame。在.frame内部我有一些div .test2，当我点击.test2时它会改变.test的html，但它也会停止主动画。我该如何保留动画？我的代码是：

$('.test').hover(function() {
    var el = $(this);
    var elWidth = el.width();
    $(el).append('<div class="frame"></div>');
    var frame = $('.frame:last');
    var posTop = el.offset().top;
    var posLeft = el.offset().left;
    frame.hide().css({
        'left': posLeft,
        'top': posTop,
        'width':200
    });
    frame.html('<div class="test2">test2</div><div class="test2">test2</div><div class="test2">test2</div>').slideToggle(150);
},function() {
    var frame = $('.frame:last');
    frame.stop().slideToggle(150, function() {
        frame.remove();
    });
});

$(document).on('click', '.test2', function() {
    $('.test').html('bbbbbbbbbbbbbbb');
});

这里有一个jsFiddle：http://jsfiddle.net/malamine_kebe/2PPwD/

如果你去jsfiddle你会看到，如果你点击“test2”它将隐藏div .frame，我怎么能让.frame打开？

Answer 1

为什么要将框架嵌套在跨度内？

正在发生的事情是悬停，您正在创建框架，然后为其设置动画。

然后点击，你正在摧毁框架。

如果你很幸运并且鼠标仍然在初始范围之上，那么它会再次触发悬停事件并重新绘制框架并再次为其设置动画。

您需要将框架放在跨度之外，这样就不会破坏它。

Answer 2

请将其用于onclick活动。 @Javalsu对这个问题是正确的。这是解决方案。

$(document).on('click', '.test2', function() {
    $('.test').contents()[0].data='bbbbbbbbbbbbbbb';
});

http://jsfiddle.net/vCDSP/1/

Answer 3

您正在替换.test中的所有内容。您可以使用detach()方法，该方法删除元素但将其存储在变量中供以后使用：

$(document).on('click', '.test2', function() {
    var frame = $('.frame:last').detach();
    $('.test').html('bbbbbbbbbbbbbbb').append(frame); 
});

请注意，jQuery 1.8中不推荐使用toggle()（您的小提示显示您使用的是2.0）。您可以改为使用mouseenter().mouseleave()。

JSFiddle

保持动画运行

3 个答案: