0

我对 jquery 和 javascript 很陌生。如果有人可以帮助我了解它是如何工作的，我会感到困惑。我有一个带有图像的 div，当我将鼠标悬停在它上面时，我希望它向上移动（这部分工作得很好）但现在我想在 div 向上移动后在图像下方显示文本，我正在尝试使用。切换，但它仅适用于第一个图像，而不适用于其余图像。它还已经显示了文本（即使我的 css 对文本显示隐藏）然后让它消失然后重新出现在悬停上我已经注释掉了我的第二种方法，它几乎做了同样的事情！:( 非常感谢您！

$('document').ready(function(){
    //move the thumbnail up
    $('.art-thumb').hover(
        function(){
            console.log('it works!');
            $(this).animate({bottom:'50px'},
                $('#artist-statement').toggle('slow', function(){})
                );
        },
        function(){
            $(this).animate({bottom:'0'});
        }
        );
                console.log('it knows it should move');

    //display the artstatement under it
        // $('.art-thumb').mouseover(function(){
        //     $('#artist-statement').toggle('slow', function(){
        //         //toggle finished.
        //     });
        // });

    });

我在这里粘贴了我的代码http://jsfiddle.net/veHq3/

4

2 回答 2

2

虽然问题有点不清楚......假设这是你想要的......

html

<div class="art-thumb"></div>
<p class="artist-statement">artist statement1</p>
<br/>
<div class="art-thumb"></div>
<p class="artist-statement">artist statement2</p>
<br/>
<div class="art-thumb"></div>
<p class="artist-statement">artist statement3</p>
<br/>

jQuery

$('document').ready(function () {
//move the thumbnail up
$('.art-thumb').hover(
function () {
    console.log('it works!');
    $(this).stop().animate({
        bottom: '50px'
    }, function () {
        $(this).next('.artist-statement').slideDown();
    });
},
function () {
    $(this).stop().animate({
        bottom: '0'
    }, function () {
        $(this).next('.artist-statement').slideUp();
    });
});
console.log('it knows it should move');


});

小提琴

解释：

使用动画的回调函数确保动画完成后的slideUpandslideDown工作。我将您的 ID 更改为 Class 以确保 ID 是唯一的（具有相同 ID 的多个元素是无效的）。使用slideDownon mouseenter 显示和slideUpon mouseleave 隐藏相应的 div。toggle()在最新版本的 jquery 中已弃用。

正如@Pete Scott 所说..display:hidden应该是display:none

事情要小心。

因为我在这里使用next().. $(this).next('.artist-statement').slideUp();，所以搜索其类是艺术家声明旁边的元素，$(this)即<div class="art-thumb">..所以你需要确保艺术家声明<p>总是紧挨着<div class="art-thumb">它才能工作。（虽然还有其他方法可以使这项工作，除非您向我们提供您的 HTML 标记）。

如果您提供了 HTML 标记，那将非常容易.. 但我认为这应该让您开始.. :)..

更新

更新的小提琴

于 2013-07-14T20:03:09.983 回答
1

你的css不正确。“显示：隐藏；” 应该是“显示：无；” 或“可见性：隐藏；” （可能是前者）。

于 2013-07-14T19:49:12.030 回答