jQuery的影响与同名

所有元素这是我的HTML文件中的代码：jQuery的影响与同名

<div id="centerBlock"> 
     <block> 
      <site style="padding-top: 10px; margin-left: 20px"> 
       <img src="./images/site1.png" alt="some_text"/> 
      </site> 
      <textOnImage style="padding-top: 10px; margin-left: 20px"> 
       lolol 
      </textOnImage> 
     </block> 

     <block> 
      <site style="padding-top: 163px; margin-left: 20px"> 
       <img src="./images/site1.png" alt="some_text"/> 
      </site> 
      <textOnImage style="padding-top: 163px; margin-left: 20px"> 
       lolol 
      </textOnImage> 
     </block> 

    </div>

这是我的javascript：

$("block").mouseenter(function(){   
    $("site").fadeTo("slow", 0.25); 
    $("textOnImage").animate({ 
     opacity: "1" 
    }, 600); 
}); 

$("block").mouseleave(function(){   
    $("site").fadeTo("slow", 1); 
    $("textOnImage").animate({ 
     opacity: "0" 
    }, 600); 
});

然而，当我将鼠标悬停在这两个块的一个元素都是不透明的，当我将鼠标从它移开时，它们都会回到原始状态。我搜索了几个小时，并且我100％确定我一直在搜索不正确的条款。我如何单独做他们？

来源

2012-02-04 Ridz

，因为你没有提出任何具体的div的ID，该选择去为所有 – kobe 2012-02-04 18:04:18

我是新jquery，你能告诉我我该怎么做？ – Ridz 2012-02-04 18:05:07

这个网站相当快，有很多聪明人，我正要输入答案，但你已经得到了你要找的东西 – kobe 2012-02-04 18:06:15

使用this仅定位触发事件的块，然后使用.find()在该特定块中查找所需的元素。你之前的做法显然是在整个页面中找到所有site元素和所有textOnImage元素，而不仅仅是触发事件的块中的元素。

$("block").mouseenter(function(){   
    var $this = $(this); 
    $this.find("site").fadeTo("slow", 0.25); 
    $this.find("textOnImage").animate({ 
     opacity: "1" 
    }, 600); 
}); 

$("block").mouseleave(function(){   
    var $this = $(this); 
    $this.find("site").fadeTo("slow", 1); 
    $this.find("textOnImage").animate({ 
     opacity: "0" 
    }, 600); 
});

来源

2012-02-04 18:05:19 jfriend00

@Ridz，正如jfriend所发布的，这指的是当前对象或当前上下文。如果你在block上做mousenter，那么这就指那个 – kobe 2012-02-04 18:07:01

里面的元素就跟其他答案一样，它只会影响第二个'block'：/ – Ridz 2012-02-04 18:11:11

@Ridz - 它在这里按预期工作：http ：//jsfiddle.net/jfriend00/ZLepq/。如果它没有在你的实际页面中工作，那么你的代码/ HTML还有其他问题，你没有向我们展示。 – jfriend00 2012-02-04 18:16:52

您需要遍历元素的结构。您可以使用.find()这样的...

$("block").mouseenter(function(){   
    $(this).find("site").fadeTo("slow", 0.25); 
    $(this).find("textOnImage").animate({ 
     opacity: "1" 
    }, 600); 
}); 

$("block").mouseleave(function(){   
    $(this).find("site").fadeTo("slow", 1); 
    $(this).find("textOnImage").animate({ 
     opacity: "0" 
    }, 600); 
});

在事件处理函数，this是对元素的引用到处理程序的约束。

你可以因为有针对性的元素也使用.children()代替.find()都只有一级。

侧面说明，您可以使用.hover()，并通过两个功能这样的..

$("block").hover(function(){   
    $(this).find("site").fadeTo("slow", 0.25); 
    $(this).find("textOnImage").animate({ 
     opacity: "1" 
    }, 600); 
}, 
    function(){   
    $(this).find("site").fadeTo("slow", 1); 
    $(this).find("textOnImage").animate({ 
     opacity: "0" 
    }, 600); 
});

你可能也想在你fadeTo和animate呼叫添加一些.stop()电话，否则当你快速移动鼠标，动画将被排队备份。

来源

2012-02-04 18:05:09

不，我很抱歉，但这不起作用。通过使用查找它只会影响第二个'块'，并通过使用孩子什么都不会发生...... – Ridz 2012-02-04 18:08:40

@Ridz：你是什么意思？然后处理程序被绑定到''block''而不是''centerBlock''。 – 2012-02-04 18:10:50

感谢您使代码更加紧凑。我正要寻找能够阻止队列动画的东西。但是，它只是影响第二个“块”。我的意思是从163px开始的元素。 – Ridz 2012-02-04 18:14:51

试试这个（提供this上下文jQuery选择定位的特定元素）：

$("block").mouseenter(function(){   
    $("site", this).fadeTo("slow", 0.25); 
    $("textOnImage", this).animate({ 
     opacity: "1" 
    }, 600); 
}); 

$("block").mouseleave(function(){   
    $("site", this).fadeTo("slow", 1); 
    $("textOnImage", this).animate({ 
     opacity: "0" 
    }, 600); 
});

来源

2012-02-04 18:06:18 Chandu

同我不是我的答案，它只会影响第二个'块'。 – Ridz 2012-02-04 18:09:47

@Ridz：你刚才对所有三个答案都留下了同样的评论。它发生在你身上，因为所有的答案都是一样的，也许它们是相同的，这是有原因的吗？ [这里是一个演示]（http://jsfiddle.net/PpjSe/）让你看到它的工作。 – 2012-02-04 18:14:51

我删除了位置绝对属性的CSS文件，现在它似乎工作...尴尬，但感谢所有:) – Ridz 2012-02-04 18:17:49

jQuery的影响与同名

回答

相关问题