Question

这段代码确实有效，但并不完全符合我的预期。

“。socialSlide”是页面底部的一个div设置，其中包含一个突出显示的锚“标签”。 div的其余部分隐藏在底部。我们的想法是在点击或悬停该链接时通过动画显示或隐藏div。

// Adding the anchor link and hiding the rest of the div   
$('.socialSlide').prepend('<a href="#" class="ssOpen">Share</a>').css('bottom', '-77px');

将切换功能添加到该锚点

    /*add socialSlide toggle*/
$('.socialSlide a.ssOpen').toggle(function() {
    $(this).parent().stop().animate({"bottom": "-25px"},{ queue:false, duration:900, easing: 'easeInOutQuint'});
    }, function() {     
    $(this).parent().stop().animate({"bottom": "70px"},{ queue:false, duration:900, easing: 'easeInOutQuint'});

发生了什么：

主播收到第一个点击动画命令。细
另一次点击锚链接应该像以前一样隐藏div，但它没有发生。它起码至少其他70像素。
第三次点击锚似乎执行第二次 function（）正确，然后是首先，从那里开始。

那么，第2步可能会发生什么？我错过了什么吗？如果这听起来太基本，请道歉。提前谢谢。

Answer 1

第二步应隐藏div？那么底部应该有负值：

$('.socialSlide a.ssOpen').toggle(function() {
    $(this).parent().stop().animate({"bottom": "-25px"},{ queue:false, duration:900});
}, function() {     
    $(this).parent().stop().animate({"bottom": "-70px"},{ queue:false, duration:900});
});

但我不会用它来隐藏节目项目，而是用另一个DIV包装内容并使用slideToggle它，例如this。

基本切换（）从下到上的幻灯片问题

1 个答案: