1

当鼠标悬停在跨度 .test 上时，它会滑动切换 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 打开？

4

3 回答 3

1

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

发生的事情是在悬停时，您正在创建框架，然后对其进行动画处理。

然后单击时，您正在破坏框架。

如果你很幸运并且鼠标仍然在初始跨度上，那么它会再次触发悬停事件并重新绘制框架并再次对其进行动画处理。

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

于 2013-08-15T15:30:27.373 回答
1

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

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

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

于 2013-08-15T15:49:05.350 回答
0

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

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

请注意，toggle()在 jQuery 1.8 中已弃用（您的小提琴显示您使用 2.0）。你可以mouseenter().mouseleave()改用。

JSFiddle

于 2013-08-15T15:32:50.833 回答