Question

如果你去：http://www.awaismuzaffar.com/examples/content_1.html

你可以查看我的jQuery函数的演示。

基本上，假设隐藏/显示内容取决于鼠标结束的div。

但是，目前您会发现当鼠标悬停在所有div元素上时，所有文本都相互重叠。

当鼠标悬停在另一个div上时，我需要想办法隐藏前一个div的内容。不知道怎么做。

以下是jQuery代码的片段：

$(document).ready(function(){
    var current_id;
    $('div.video_image').hover(
        function(){
            current_id = $(this).attr('id').split('_')[1];
            $('div#text_' + current_id).stop().animate({'opacity': '1'}, 'slow');                
        }
    );
});

感谢。

Answer 1

您是否尝试过element.hide()和element.show()功能？他们将速度作为参数（例如'慢'，'快'等）。

Answer 2

解决方法是清除大div（.empty函数）并将新文本放入（.append（）函数或.html（）函数中）

Answer 3

可能有用的东西。以下是此脚本的示例：http://jsbin.com/apiya3

$(document).ready(function(){
    var current_id, previous_id;
    $('div.video_image').hover(
        function(){
            previous_id = current_id;
            if (previous_id)
                $('div#text_' + previous_id).stop().animate({'opacity': '0'}, 'slow');

            current_id = $(this).attr('id').split('_')[1];
            $('div#text_' + current_id).stop().animate({'opacity': '1'}, 'slow');                
    });
 });

Answer 4

您应该使用鼠标悬停和鼠标悬停功能而不是悬停，因为当您将鼠标移离元素时悬停不会重置。此外，show（）和hide（）函数比为不透明度设置动画更容易。

$(document).ready(function(){
var current_id;
$('div.video_image').mouseover(
    function(){
        current_id = $(this).attr('id').split('_')[1];
        $('div#text_' + current_id).stop().show('slow');                
    });
$('div.video_image').mouseout(
    function(){
        $('div#textcontainer).children().hide('slow');

});

或类似的东西至少......

JQuery - 创建一个隐藏/显示内容的函数

4 个答案: