JQuery Slidedown函数

当谈到使用JQuery时，我很新。我知道我想要做的是非常基本的。JQuery Slidedown函数

基本上，我需要创建一个“标题”框，单击图像时向下滑动。

用户点击图片，一个小小的标题框滑出底部向他/她描述他刚才点击了什么。

我创建了一个小图像来进一步阐明我需要做什么。

enter image description here

来源

2013-04-11 Colin

像这样http://www.catchmyfame.com/jquery/dropcaptions/？ – j08691 2013-04-11 22:10:53

是的，但在图像上单击，而不是鼠标悬停 - 这是一个简单的改变吗？ – Colin 2013-04-11 22:18:07

应该是。试着改变插件对鼠标悬停的使用或悬停点击。 – j08691 2013-04-11 22:22:13

您应该检查TheNewBoston是告诉你如何使用jQuery甚至从头开始了一个YouTube频道。

这里是一个例子。我认为这可以帮助你。

$(document).ready(function() { 

    $('.box-img').click(function() { 
     $('.box-caption').slideDown('slow'); 
    }); 

});

CSS：

.box-img { 
    width: 100px; 
    height: 100px; 
    border: thin solid gray; 
    position: relative; 
} 

.box-caption { 
    width: 100%; 
    height: 30px; 
    position: absolute; 
    bottom: 0px; 
    background-color: #d4d4d4; 
    display: none; 
}

HTML：

<div class="box-img"> 
    my image 

    <div class="box-caption">my caption</div> 
</div>

来源

2013-04-11 22:32:08 RicardoGonzales

完美，感谢真正的经历。正是我需要的。 – Colin 2013-04-11 22:48:32

对不起，为了得到我想要的结果，我需要在这个例子中改变什么？我理解HTML/CSS - 但顶层的Java东西需要改变吗？（例如“文件”，“box-img”，“box-caption”） – Colin 2013-04-11 23:17:04

没关系，我明白了。它的工作很好。你能告诉我如何使它再次点击时隐藏标题吗？另外，当我们说话时检查TheNewBoston！谢谢！ – Colin 2013-04-11 23:24:54

http://api.jquery.com/slideDown/在这里你可以看到一些样品，这是很容易真的：

$('#ImageID').click(function() { 
    $('#captionboxID').slideDown('slow'); 
});

来源

2013-04-11 22:21:29

谢谢你，帮我理解！ – Colin 2013-04-11 22:48:17

JQuery Slidedown函数

回答

相关问题