1

人が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);
    })

});

私の質問は、そのタイトルに属する情報をフェードインさせ、他のすべての情報をフェードインさせるにはどうすればよいかということです。

これは、少しのphpを含む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>
4

4 に答える 4

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);
   });

});
于 2012-08-05T15:11:24.517 に答える
0

最良の方法は、.holder要素のスタイルとサイズを指定し、.holder要素をターゲットにすることです。これにより、サイズを変更したり、要素が消えたりしてイベントハンドラーが混乱することなく、子をフェードインおよびフェードアウトすることが簡単になり、子をターゲットにできます。.holderDOMツリーを上下に移動することなく、それぞれを1つの関数にまとめます。

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);
    })
});​

フィドル

于 2012-08-05T16:05:45.150 に答える
0

あなたがしたいことは、特に要素をターゲットにすることです。それらが常にこの順序になっている場合は、次を使用できます。

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

その後、タイトルに戻るには、次を使用できます

$(this).prev();

情報から

于 2012-08-05T15:11:43.563 に答える
0

この別の方法のように、より少ないコードでそれを行うことができます。

ここで遊ぶ jsFiddle があります。

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; }
于 2012-08-05T15:35:07.757 に答える