jQuery fadeIn fadeOut在ClassName上运行

jQuery fadeIn fadeOut run on ClassName

本文关键字：运行 ClassName fadeIn fadeOut jQuery      更新时间：2023-09-26

我有网格/列表视图内容，并且只想在网格视图中运行javascript代码。我已经为网格".Grid"添加了Main类，但它仍然影响列表视图。

// SHOW HIDE GALLERY BUY BUTTONS
$(document).ready(function(){
    $('ul.grid li.text').hover( 
    function(){
        $(this).find('.button').delay(400).fadeIn(200);
    },
    function(){
        $(this).find('.button').clearQueue().fadeOut(400);
    });
});

<div id="container">
    <div class="buttons">
        <button class="grid">Grid View</button>
        <button class="list">List View</button>
    </div>
    <ul class="list">
        <li class="text">Item 1<button class="button">Button</button></li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
    </ul>
</div>

检查jsFiddle Demo

页面加载后

  1. "在列表视图中"按钮显示并且应保持显示状态
  2. 在网格视图中，按钮应隐藏，鼠标悬停在上面时应显示列表

我对进行了两次更改

CSS

#container .list .button {display:block !important;}

这将覆盖jQuery 在按钮上进行的样式设置

jQuery

$(document).ready(function(){
    $(document).on('mouseenter', '.grid li.text', function(){
        $(this).find('.button').delay(400).fadeIn(200);
    });
    $(document).on('mouseleave', '.grid li.text', function(){
        $(this).find('.button').clearQueue().fadeOut(400);
    });
});

这将仅为网格视图按钮（委托.on()）设置动画

请在此处查看我的jsFiddle

您的HTML标记是错误的

这是更新的演示

 $('.styled_view .article_wrapper').hover(
    function(){
         $('.article_button',this).delay(400).fadeIn(200);
     },
    function(){
        $('.article_button',this).clearQueue().fadeOut(400);
  });
相关文章：