单击时jQuery向上滑动不起作用答案

【问题标题】：jQuery slide up on click is not working单击时jQuery向上滑动不起作用
【发布时间】：2014-04-02 12:22:01
【问题描述】：

当用户在 div 内单击时，我正在尝试向上滑动图片。这不仅适用于不显示下一张图片的上滑。

我还希望它在单击最后一张图片时向上滑回顶部（或向下滑回第一张图片）

有什么想法吗？

CSS：

#clickbox {
width: 300px;
height: 300px;
overflow: hidden;
}

html：

<div id="clickbox">
    <img src="http://socialmediaseo.net/wp-content/uploads/2010/05/500px-android-logosvg-300x300.png" width="300" height="300">
    <img src="http://www.backwoodshome.com/blogs/ClaireWolfe/wp-content/uploads/2011/09/CopBashingMedicalPatient-300x300.jpg" width="300" height="300">
    <img src="http://www.prieteni.ro/uploads/albumfoto/396711_353820_wy_s_300x300.gif" width="300" height="300">
    <img src="http://f1.pepst.com/c/EBF8DC/25835/ssc3/home/023/deepakjain/albums/face_13.1kb.jpg_480_480_0_64000_0_1_0.jpg" width="300" height="300">       
</div>

jQuery:

    $( "#clickbox" ).on( "click", function() {
        $( "#clickbox" ).slideUp( 2000 );
    });

jsFiddle：

http://jsfiddle.net/9CpxX/

【问题讨论】：

标签： jquery html image click slider

【解决方案1】：

替换

$( "#clickbox" ).slideUp( 2000 );

与

if ($( this ).find("img:visible").length > 1)
$( this ).find("img:visible").first().slideUp( 2000 );
else
$( this ).find("img:not(visible)").slideDown(2000);

编辑

将图像放入每个 div 中，然后执行

if ($( this ).find("div:visible").length > 1)
$( this ).find("div:visible").first().slideUp( 2000 );
else
$( this ).find("div:not(visible)").slideDown(2000);

看起来好多了

【讨论】：