jQuery悬停:在隐藏的div中淡出,而淡出“默认”值]

问题描述 投票:2回答:6

$(function() {
  $('#wrap').hover(
    function() {
      $('#wrap .image').fadeOut(100, function() {
        $('#wrap .text').fadeIn(100);
      });
    },
    function() {
      $('#wrap .text').fadeOut(100, function() {
        $('#wrap .image').fadeIn(100);
      });
    }
  );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="wrap">
  <div class="image">
    <img src="http://example.com/images/image.png">
  </div>
  <div class="text hide">
    <p>Text text text</p>
  </div>
</div>

我有两个div(其中一个隐藏在CSS中),我在悬停时在一个公共空间内交替交替淡入和淡出。

而且我正在应用此jQuery代码淡出图像-并在悬停时淡入文本中

但是问题是文本div变得发粘并且不会淡出-始终是鼠标移动太快。

您知道这在哪里可以解决吗?

我设置了在线测试:http://paragraphe.org/stickytext/test.html

感谢您的小费

jquery hidden sticky fadein fadeout
6个回答
3
投票

如果包装纸上没有宽度和高度,则一旦移除图像元素,它就会缩小,可能会得到一些奇怪的结果。要查看,请在包装纸周围添加边框和固定的高度/宽度。或者至少对图像和文本div使用相同的高度。

<style type="text/css">
#wrap { width: 200px; height: 200px; border: 1px solid black; }
</style>

编辑

删除了不适用于您要完成的代码的示例。


3
投票

在悬停功能上尝试使用。stop(),这将防止出现将鼠标快速移至div的竞争情况

<script type="text/javascript">
    $(function () {
        $('#wrap').hover(
            function () {
                $('#wrap .image').fadeOut(100, function () {
                    $('#wrap.text').fadeIn(100);
                });
            },
            function () {
                $('#wrap.text').stop().fadeOut(100, function () {
                    $('#wrap.image').stop().fadeIn(100);
                });
            }
        );
    });
</script>

2
投票

尝试使用队列:

<script type="text/javascript">
$(function(){
    $('#wrap').hover(
        function(){
            $('#wrap .image').stop(true).fadeOut(100);
            $('#wrap .image').queue(function(){
                $('#wrap.text').fadeIn(100);
                $(this).dequeue();
            });
        },
        function(){
            $('#wrap .image').stop(true).queue(function(){
                $('#wrap.text').fadeOut(100);
                $(this).dequeue();
            });
            $('#wrap .image').fadeIn(100);
        }
    );
});
</script>

jQuery队列是每个元素的,所以我在这里要做的是在de image queue下启动文本效果。

然后我再给你一个建议。如果您打算将此效果应用于各种图像,请使用class而不是id。

...
    $('.wrap').hover(
        function(){
            var wrap = this;
            $('.image', wrap).stop(true).fadeOut(100);
            $('.image', wrap).queue(function(){
                $('.text', wrap).fadeIn(100);
                $(this).dequeue();
            });
....

这样,您只需要调用一次。


0
投票

您的代码永远不会淡出text div。悬停事件的两个功能将使图像淡出并在文本中淡出。


0
投票

[两个hover功能中您具有相同的代码。您不应该在第二种情况下替换选择器吗?

<script type="text/javascript">
$(function(){
$('#wrap').hover(
    function(){
            $('#wrap .image').fadeOut(100, function(){
                $('#wrap.text').fadeIn(100);
            });
    },
    function(){
            $('#wrap.text').fadeOut(100, function(){
               $('#wrap.image').fadeIn(100);                                            
            });
    }
    );
});
</script>

0
投票

感谢所有提示:

我尝试使用mouseenter / mouseleave事件,因为它们似乎在详细处理要处理的div(as seen here),但没有任何改变。因此,看到所有常用的jQuery指令均未响应,我已经按照建议的CSS签出了。

有窍门。

我所拥有的:

.text p{position:relative; top:-370px; padding: 0 10px}

设置了一个巨大的空白区域,浏览器将其解释为游标被光标“不停”(我注意到飞越那个空白区域使文本能够正确响应)。

所以我改成那个:

.text {margin-top:-370px; padding: 0 10px; float:left}

哪个让“ p”标记单独放置,并将第二个块放置在div中,但后面没有一丝空白。

然后,关于代码段,它也可以与mouseenter / moseleavehover一起使用:

<script type="text/javascript">
$(function(){
$('#wrap').mouseenter(
        function(){
            $('#wrap .image').fadeOut(100, function(){
                $('#wrap .text').fadeIn(100);                        
            });
        }
        );
$('#wrap').mouseleave(
        function(){
            $('#wrap .text').fadeOut(100, function(){
                $('#wrap .image').fadeIn(100);                       
            });
        }
        );
});
</script>

这是改进的版本http://paragraphe.org/nice/test.html

© www.soinside.com 2019 - 2024. All rights reserved.