3

私はjqueryを初めて使用し、div内の画像を選択しようとして立ち往生しています。

<div class="div-main">
  <div class="title"></div>
  <div class="description"></div>
  <img class="post-thumb" src="img.jpg"/>
</div>

ユーザーがdiv内の画像にカーソルを合わせたときにのみ、タイトルと説明を表示しようとしています。

現在、div-mainにカーソルを合わせたときにアニメーションが発生するように設定しています。

$(document).ready(function(){
    $(".div-main").hover(
      function () {
        $(this).children(".title").fadeIn("slow");
        $(this).children(".description").fadeIn("slow");
        $(".div-main").css({ opacity: 0.1 });
        $(this).css({ opacity: 1.0 });
        $(this).show();
      }, 
      function () {
        $(".title").hide();
        $(".description").hide();
        $(".div-main").fadeIn("fast");
        $(".div-main").css({ opacity: 1.0 });
      }
    );

});
4

3 に答える 3

1

jsBinデモ

$(".div-main").hover(
  function () {
    $(".title, .description", this).fadeTo(300, 1);
    $(".div-main").stop().fadeTo(0, 0.3);
    $(this).fadeTo(300,1);
  },function () {
    $(".title, .description").hide();
    $(".div-main").stop().fadeTo(300, 1);
  });
于 2012-06-07T23:35:00.953 に答える
0

これを回答として投稿することにしました。

$('.div-main > img')
    .hover(function(){
        $(this).parent().find(".title, .description").fadeIn();  //Title & description
    },
    function(){
        $(this).parent().find(".title, .description").fadeOut();
    }
);
于 2012-06-07T23:27:13.023 に答える
0

画像にカーソルを合わせたときに説明とタイトルをフェードインおよびフェードアウトするには、次のようにします。

$('.div-main .post-thumb').hover(function(){
  $(this).parent().find(".title, .description").stop(true).fadeIn();
},
function() {
  $(this).parent().find(".title, .description").stop(true).fadeOut();
});

通常、ホバーした場合を除いて画像が唯一の表示コンテンツである場合、タイトルと説明にホバーしたときにも表示されたままになるため、これはより適切に機能する可能性があります。

$('.div-main').hover(function(){
  $(this).find(".title, .description").stop(true).fadeIn();
},
function() {
  $(this).find(".title, .description").stop(true).fadeOut();
});
于 2012-06-07T23:30:19.803 に答える