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

发布于 2024-10-24 05:13:51 字数 675 浏览 1 评论 0原文

如果您访问：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');                
        }
    );
});

谢谢。

原文

If you go to: http://www.awaismuzaffar.com/examples/content_1.html

you can view a demonstration of my jQuery function.

Basically, it is suppose to hide/display content depending which div the mouse is over.

However, at the moment you will realize that when the mouse has hovered over all the div elements, all the text is overlapping each other.

I need to figure out a way to hide the content of the previous div, when the mouse is over another div. Not sure how to do this.

Here is a snippet of the jQuery code:

$(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');                
        }
    );
});

Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

时光病人 2024-10-31 05:13:51

类似的东西可能会起作用。以下是此脚本实际运行的示例： 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');                
    });
 });

Something like might work. Here is an example of this script in action: 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');                
    });
 });

回复收藏 0 原文

彩虹直至黑白 2024-10-31 05:13:51

您是否尝试过 element.hide() 和 element.show() 函数？他们将速度作为参数（例如“慢”、“快”等）。

回复收藏 0 原文

深海夜未眠 2024-10-31 05:13:51

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

回复收藏 0 原文

星星的轨迹 2024-10-31 05:13:51

您应该使用 mouseover 和 mouseout 函数而不是悬停，因为当您将鼠标移离元素时，悬停不会重置。此外，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');

});

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

You should use the mouseover and mouseout functions instead of hover because hover doesn't reset when you move the mouse off the element. Also, the show() and hide() functions are easier than animating the opacity.

$(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');

});

Or something like that at least...

回复收藏 0 原文

~没有更多了~