0

I have numerous images that I need to have this js functionality. It works great with one, but when I add a second image and text, if I mouse over this or the first image it causes the text to display on both (their own text but the slide comes up). Can I change this js so it works for numerous images/text? Thank you.

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

您是否尝试过在函数悬停中使用this范围：

(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 回答