Question

在搜索互联网之后，我无法找到解决以下问题的有效方法（最大的问题是知道要问什么）：

我正试图找到一种方法来编写example site（也在下面列出）中找到的更高效的jQuery脚本版本。我面临的最大障碍是找出一种方法来动态匹配一个触发元素（例如'.logo_wrap div.logo.img1'）和它各自的动画元素（'.sliding_titles .img1'）。

我已经在需要匹配的div的末尾添加了数字，我似乎无法找到正确匹配它们的方法，然后将悬停触发器应用于一个和滑出动画到其他

我为这篇文章创建的示例网站只列出了六个对象，但是有另一个网站需要对29个独立的对象进行此操作 - 这最终会产生大量代码。

请参阅示例网站 - 工作正常。我只需要找到一种方法来更有效地编写与之关联的脚本：http://redesign.mproven.com/sliding_example.html

非常感谢此事的任何和所有帮助，谢谢。

这是一个简单的例子：

Javascript（jQuery）：

$(document).ready(function(){

$('.logo.img1, .logo.img2, ...etc,').fadeTo("fast", 0);

    $(".logo.img1").hover(function() {
    $(this).stop().animate({"opacity": "1"}, "500");
    $('.sliding_titles div.img1').stop().animate({opacity: 1, width: "500px", overflow: "visible" }, 400);
},
function() {
    $(this).stop().animate({"opacity": "0"}, "500");
    $('.sliding_titles div.img1').stop().animate({opacity: 0, width: "0px", overflow: "hidden" }, 1);
});

$(".logo.img2").hover(function() { 

    ... etc.

});

HTML（按照它们出现在body标签中的顺序）：

首先是当匹配的徽标悬停在

上时滑出的内容模块

<div id="sliding_titles" class="sliding_titles">  

<!-- Youtube -->
<div class="img1" rel="slide_youtube">
  <img class="fade_overlay" src="images/sliding_fade_overlay.png" width="100" height="110" />
  <table>
    <tr>
      <td>          
        <img src="images_example/placeholder_100x100.png" width="100" height="100"></td>
      <td>
        <h3>YouTube slideout placeholder content</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </td>
    </tr>
  </table>      
</div><!-- end .img1 -->

<div class="img2" rel="slide_facebook"> ... etc ... </div>

然后出现徽标div，当悬停时 - 会触发它的各个内容div滑出（上面列出）：

<div class="logo_wrap">

    <div class="logo img1" rel="youtube">
    </div><!-- end .logo -->

    <div class="logo img2" rel="facebook">
    </div><!-- end .logo -->

    <div class="logo img3" rel="rss">
    </div><!-- end .logo -->

    ... etc ...

</div>

Answer 1

对jQuery了解不多，但你可以从image-div中获取rel并使用它来获取相应的滑动标题。你能改变html所以你有ID的div吗？

E.g. <div class="img1" id="slide_youtube">

使用mootools你可以做这样的事情：

$$('div.logo').each(function(e) {       
    var rel = e.getProperty('rel');
    if (n) {
        $('slide_' + rel).addEvent('mouseover', function() { 

            // etc

        });
    }
});

猜猜jQuery也可以这样做。

有效地匹配元素对并将特定的悬停触发/动画应用于每对

1 个答案: