0
画像キャプション 
<div class="btheme">    
   <a href="/a3"><img src="/a3.jpg" /></a>
   <div class="caption">
       <div>image caption3</div>
   </div>   
</div>


<div class="btheme">    
   <a href="/a2"><img src="/a2.jpg" /></a>
   <div class="caption">
      <div>image caption2</div>
   </div>   
</div>

jqueryでマウスオーバーしたときにキャプションを表示/非表示にするために以下のコードを使用しました。

<script type="text/javascript">

    jQuery(document).ready(function(){

         jQuery("div.btheme img").mouseover(function(){
              jQuery(this).parent().find("div.caption").slideDown("slow");             
         });

         jQuery("div.btheme img").mouseout(function(){
             jQuery(this).parent().find("div.caption").slideUp("fast");              
         });                
   });

  </script>

それは正常に動作します。キャプションは上から下に表示されます (slideDown のため)。

しかし、マウスオーバーしたときにそのキャプションを下から上に表示する必要があります。

これどうやってするの？

4

3 に答える 3

0

または、以下を使用することもできます。

<script type="text/javascript">

jQuery(document).ready(function(){
jQuery("div.btheme img").mouseenter(function(){
jQuery(this).find("div.caption").show('slide', {direction:'down'}, 500);
});
jQuery("div.btheme img").mouseleave(function(){
jQuery(this).find("div.caption").hide('slide', {direction:'down'}, 100);
});

});
</script>
于 2012-05-04T05:01:49.977 に答える
0

jquery animate を使用してこれを行うことができます。マージントップを希望の場所にアニメーション化してみることができます。

$('div.caption').animate();

ここにリンクがあります。 http://api.jquery.com/animate/

于 2012-05-03T10:50:50.283 に答える
0

私は答えを得た、

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("div.btheme img").mouseenter(function(){
jQuery(this).find("div.caption").animate({
    width: "180px", 
    top: "-84px",   
    display: "block",
    opacity: "1"
  }, 1000 );
});
jQuery("div.btheme img").mouseleave(function(){
jQuery(this).find("div.caption").stop().animate({
    width: "180px", 
    display: "none",
    top: "-60px",
    opacity: "0"
  }, 500 );
  });

});
</script>
于 2012-05-03T12:29:17.923 に答える