Question

当一个人在div上盘旋时，我想要淡入淡出多个元素。有一个标题和信息，当一个人盘旋在该特定标题上时，我希望标题淡出，并且该信息属于该标题以淡入。

以下是代码：

$(document).ready(function(e) {
    if($(".info").is(":visible")) {
        $(".info").hide();
    }

    $(".title").mouseenter( function() {
        $(this).fadeOut(100);
        $(this).$(".info").fadeIn(100);
    })
    $(".info").mouseleave( function() {
        $(this).fadeOut(100);
        $(this).$(".title").fadeIn(100);
    })

});

我的问题是：如何让属于该标题的信息淡入而不是所有其他信息。

这是HTML有一点点的HTML

<div class="holder">

            <div class="title">
                <img alt="random" src="pictures/<?php echo $company['picture']; ?>" height="100" width="100">
                <p><a href="profile.php?company=<?php echo $company['id']; ?>"><?php echo $company['title']; ?></a></p>
            </div>

            <div class="info">
                <p><a href="profile.php?company=<?php echo $company['id']; ?>"><?php echo $company['message']; ?></a></p>
            </div>

        </div>

Answer 1

试试这个

$(document).ready(function(e) {
  if($(".info").is(":visible")) {
    $(".info").hide();
  }

  $(".title").mouseenter( function() {
     $(this).fadeOut(100);
     $(this).next(".info").fadeIn(100);
   });

   $(".info").mouseleave( function() {
     $(this).fadeOut(100);
     $(this).prev(".title").fadeIn(100);
   });

});

Answer 2

你想要做的是专门针对元素，如果它们总是按此顺序排列，你可以使用：

$(this).next().fadeIn(100);

然后回到标题，你可以使用

$(this).prev();

来自信息的

Answer 3

你可以用更少的代码来做到这一点：

<强> Here is jsFiddle to play with.

HTML：

<div class="title">
          <img src="http://www.hurriyet.com.tr/_np/2769/17512769.jpg" height="100" width="100">
          <p><a href="profile.php?company=<?php echo $company['id']; ?>"><?php echo $company['title']; ?></a></p>

          <div class="info">
                <p>here is some info.here is some info.here is some info.</p>
          </div>
 </div>

-------------------

jQuery的：

$(document).ready(function() {

    $('.title').bind({
        mouseenter: function() {
            $(this).children(".info").stop(false,true).fadeIn(100);
        }, mouseleave: function() {
            $(this).children(".info").stop(false,true).fadeOut(100);
            $(this).fadeIn(100);
        }
    });

});

-------------------

的CSS：

.info { display:none; }

Answer 4

最好的方法是只提供.holder元素的样式和大小，并定位.holder元素，因为这样可以轻松地将其子项淡入淡出而无需更改大小并消失搞乱事件处理程序的元素，你可以在一个函数中定位每个.holder的子元素，而不需要在DOM树上上下移动太多：

的CSS：

.holder {position: relative; 
         height: 140px; 
         width: 100px;
        }

JS：

$(function() {
    $(".info").hide(); //no need to check if the class is visible

    $(".holder").on('mouseenter mouseleave', function() {
        $('.info, .title', this).fadeToggle(100);
    })
});

FIDDLE

淡入淡出多个元素

4 个答案:

-------------------

-------------------