0

このjs機能を持たせるために必要な画像がたくさんあります。1つでうまく機能しますが、2番目の画像とテキストを追加すると、この画像または最初の画像にマウスを合わせると、テキストが両方に表示されます(独自のテキストですが、スライドが表示されます)。このjsを変更して、多数の画像/テキストで機能するようにすることはできますか? ありがとうございました。

JS:

//var yt_height = $('.youtube').height();
var adjust = 45;
var yt_height = $('.youtube').height() - adjust;
var top       = yt_height - $('.yt-desc').height()+20;
$('.yt-desc').css({ top: yt_height + 'px' });
$(".youtube").hover(
    function() { $('.yt-desc').animate({ top: top + 'px'       }, 'slow') },
    function() { $('.yt-desc').animate({ top: yt_height + 'px' }, 'slow') }
);

html:

<div class="youtube" style="margin-right: 30px">
    <img src="/images/test1.jpg">
    <div class="yt-desc">
        <span style="font-weight: bold; font-size: 14px">Web Mapping Applications</span><br /><br />
          <span style="font-size: 12px">Pellentesque habitant morbi tristique senectus et
            netus et malesuada fames ac turpis egestas.fjdslfkj. Eelrjklej slk  slekrje lskf dk jsldfk d</span>
        </p>
    </div>
</div>

<div class="youtube">
    <img src="/images/test2.jpg">
    <div class="yt-desc">
        <span style="font-weight: bold; font-size: 14px">Law Enforcement</span><br /><br />
          <span style="font-size: 12px">Pellentesque habitant morbi tristique senectus et
            netus et malesuada fames ac turpis egestas.fjdslfkj. Eelrjklej slk  slekrje lskf dk jsldfk d</span>
        </p>
    </div>
</div>

CSS:

.youtube {
    background: #ccc;
    float: left;
    position: relative;
    width: 310px;
height: 217px;
    overflow: hidden;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: 1px solid #ccc;
}

.youtube .yt-desc {
    position: absolute;
    color: #000;
    left: 0px;
    background: #ccc;
width: 300px;
padding-left: 10px;
padding-top: 17px;
padding-bottom: 20px;
line-height: 18px;
}
4

2 に答える 2

0

ホバー コールバックで に$('.yt-desc').animate置き換えます 。$(this).children('.yt-desc').animateイベント コールバックでthisは、常に対象となる要素です。

それ以外の場合は、クラス yt-desc を持つドキュメント内のすべての要素、つまり両方のスライドがアニメーション化されます。

于 2013-10-11T18:21:01.760 に答える
0

関数ホバーでこのスコープを使用してみましたか:

(function ($) {  

  Drupal.behaviors.exampleBehavior = {
    attach: function (context, settings) {       
        //var yt_height = $('.youtube').height();
        var adjust = 45;
        var yt_height = $('.youtube').height() - adjust;
        var top = yt_height - $('.yt-desc').height()+20;
        $('.yt-desc').css({ top: yt_height + 'px' });

        $(".youtube").hover(
               function() { $(this).find('.yt-desc').animate({ top: top + 'px'       }, 'slow') },
               function() { $(this).find('.yt-desc').animate({ top: yt_height + 'px' }, 'slow') }
        );
     }
   };
 })(jQuery);

カーソルを合わせると、$(this)は.youtubeを参照し、その子.yt-descを見つけます

于 2013-10-11T18:22:01.607 に答える