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

Posted 2023-05-08

【中文标题】基本切换（）从下到上的幻灯片问题

【英文标题】：Basic toggle() bottom-to-top slide issue

【发布时间】：2011-05-08 20:35:21

【问题描述】：

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

".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 步可能会发生什么？我错过了什么吗？如果这听起来太基本，请道歉。提前致谢。

【问题讨论】：

您能否实际展示一下 - 无论是您自己的网站还是jsfiddle.net

【参考方案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 包装内容并滑动切换它，例如 this。