Javascript jQuery淡出淡出文本

我现在有：（列表更长，但这只是一个元素）

在html之上，我有一个javascript：

<script type="text/javascript" language="javascript">
// <![CDATA[
function onMouseOverCatDisplay(catimg, catnaam)
{
    $("#lh").stop().animate({ color: "#1C1C1C" }, 2000);
    $("#lh").html(catnaam);
    $("#lh").stop().animate({ color: "#DBDBD6" }, 2000);

    $("#imgCat").attr("src", catimg);
}
// ]]>
</script>

// 

这是：

<h4 id="lh">Bikes</h4>
<img id="imgCat" src="img/bike.jpg" />

自行车

现在一切正常，但动画不工作

我想淡出h4，替换文本，然后淡入

编辑使用jQuery而不是javascript设置图像源

EDIT2

重写该部分，使其不使用mouseout和mouseover来触发javascript。但无法找到将另一个参数传递给jquery（图像）的方法

$（文档）.ready（函数（）{
$（'div.divLeftCatMenu a'）。悬停(
函数（）{
$（this.stop（）.animate（{color:'#E90E65'，borderBottomColor:'#E90E65'}，1000）；
var catn=$（this.attr（'title'）；
$（“#lh”）.html（catn）；
},
函数（）{
$（this.stop（）.animate（{color:'#CCC6C6'，borderBottomColor:'#3e3e3e'}，1000）；
var catn=$（“a.subCatLinksSelected”）.attr（'title'）；
$（“#lh”）.html（catn）；
});

对于初学者，您使用的是jQuery，但将事件附加为内联javascript函数调用。不要这样做。将事件附加到准备文档的jQuery函数内的DOM对象

然后您可以使用“document.getElementById”，这很好，但是为什么不使用标准的jQuery选择器来保持一致性（反过来，它将为您使用getElementById）

最后，可能发生的情况是，您的函数同时调用两个动画。您希望第二个动画仅在第一个动画完成后发生。为确保这一点，您希望调用第一个动画，然后通过第一个动画中的回调函数调用html交换和第二个动画。请参阅r例如：

最后，虽然可以设置颜色动画，但您可能更喜欢使用fadeIn和fadeOut

更新：

此外，您还有：

 onmouseover="onMouseOverCatDisplay("H5032.jpg", "Go to: cars");"       

请尝试以下方法：

 onmouseover="onMouseOverCatDisplay('H5032.jpg', 'Go to: cars');"       

你试过了吗

$("#lh").stop().animate({ color: "#1C1C1C" }, 2000, function() {
    $("#lh").html(catnaam); 
    $("#lh").stop().animate({ color: "#DBDBD6" }, 2000); 
}); 

因为我认为这两个动画相互重叠。这样，第二个动画将在第一个动画完成后开始。

最终演示：

如果您想使用

title

属性执行此操作，只需修改以下代码并将标题属性设置为参考链接（

图像链接

，如果您愿意）

HTML：

<a class="subCatLinksSelected" href="#" style="cursor:pointer;" title="cars"> cars </a> &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
<a class="subCatLinksSelected" href="#" style="cursor:pointer;" title="bikes"> bikes</a>
<br />
<br />
<h4 id="lh">Bikes</h4>

<img id="ctl00_ContentPlaceHolder1_men_imgCat" src="http://www.gravatar.com/avatar/6dec5eb240c49d979542d7cef64e9a8d?s=128&d=identicon&r=PG" />

var arr = [];
arr[0] = "http://www.gravatar.com/avatar/6dec5eb240c49d979542d7cef64e9a8d?s=128&d=identicon&r=PG";
arr[1] = "http://www.gravatar.com/avatar/e555bd971bc2f4910893cd5b785c30ff?s=128&d=identicon&r=PG";
arr[2] = "http://www.gravatar.com/avatar/54d38793d7a407446999b33b81d607fd?s=128&d=identicon&r=PG";

//for instance i'm using an array to cache your image links
//if you can want these links as your anchor tag "title" attrib just modify the below code

 $(document).ready(function() {  

     var which_image = null; //detect which Image to use
       $(".subCatLinksSelected").hover(function() {

           var catn = $(this).attr('title');
           if(catn == 'cars') {        
               which_image = arr[1];
           } else {
               which_image = arr[2];
           }    
           onMouseOverCatDisplay(which_image, 'Go to: ' + catn,'#0099f9');

       },function() {

          var catn = $("a.subCatLinksSelected").first().attr('title');
          which_image = arr[0]
          onMouseOverCatDisplay(which_image,'You see: ' + catn, '#000');

       });
    });


 function onMouseOverCatDisplay(catimg, catnaam, color) {

    $('#ctl00_ContentPlaceHolder1_men_imgCat').attr('src',catimg);

    $("#lh")
        .css({opacity:0.2,color:"#1c1c1c"})
        .html(catnaam)
        .css({color: color})
        .stop()
        .animate({opacity:1 },2000);
  }

但是，如果要访问映像，则需要将其绑定到每个函数…请尝试以下操作：

$（文档）.ready（函数（）{ $（'div.divLeftCatMenu a'）。悬停( 函数（）{ $（this.stop（）.animate（{color:'#E90E65'，borderBottomColor:'#E90E65'}，1000）； var catn=$（this.attr（'title'）； $（“#lh”）.html（catn）； }.bind（$（图像的一些选择器））， 函数（）{ $（this.stop（）.animate（{color:'#CCC6C6'，borderBottomColor:'#3e3e3e'}，1000）； var catn=$（“a.subCatLinksSelected”）.attr（'title'）； $（“#lh”）.html（catn）； }.bind（$（图像的一些选择器））

---

然后，您就可以使用this访问每个函数中的图像，就像this.src

您是否尝试过在javascript中用

替换
”

为什么使用

this.document.getElementById（…）

？我想

document.getElementById（…）

就足够了。你好，Avinash，我在firefox errorconsole中使用单引号并替换了getelementbyid时，得到了一个“unterminated string literal”part@jp，

quote；

被HTML解析器解析为

，

&如果您得到了一个“未终止的字符串文本”，那么将其解析为

，

并不是javascript解析器的工作我建议你安装firebug:Hello Avinash，我有firebug，我有\"在我的代码中。虽然它只是工作。但只有动画不起作用。很抱歉，这不起作用。它在第一个元素起作用。但没有动画恢复到原始颜色。你好，DA。完全同意你的答案，但我刚刚将这段旧javascript迁移到jquery。但是无法使动画工作，并且不知道如何将参数传递到jquery方法，因为每个项目的名称和图像都是可变的（）对于listWell，为了让动画发挥作用，请阅读上面关于回调函数的链接。这应该会让您开始。如果您遇到问题，请发布更新，我们会看一看！DA，matschie尝试了回调函数。但这不起作用。现在我已经重写了部分，以便它使用jquery的悬停函数。但是我不能我演示了如何将两个参数传递给jquery（图像和名称）。将在上面更新。如果您使用的是.hover事件，则该事件将附加到文档准备就绪，因此您不会向其传递任何内容。您可以在调用hover事件时“获取变量”。您必须以某种方式存储变量。您可以使用jQuery的.data，也可以使用自定义类名并在hover函数中解析它们。thanks Avinash，gonne明天（办公日结束时）再仔细看一看！我现在有了这个，但我希望从“感谢Avinash”中检索到的图像将更新我的代码，以便生成一个javascript数组，其中包含图像的URL:）

<a class="subCatLinksSelected" href="#" style="cursor:pointer;" title="cars"> cars </a> &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
<a class="subCatLinksSelected" href="#" style="cursor:pointer;" title="bikes"> bikes</a>
<br />
<br />
<h4 id="lh">Bikes</h4>

<img id="ctl00_ContentPlaceHolder1_men_imgCat" src="http://www.gravatar.com/avatar/6dec5eb240c49d979542d7cef64e9a8d?s=128&d=identicon&r=PG" />

var arr = [];
arr[0] = "http://www.gravatar.com/avatar/6dec5eb240c49d979542d7cef64e9a8d?s=128&d=identicon&r=PG";
arr[1] = "http://www.gravatar.com/avatar/e555bd971bc2f4910893cd5b785c30ff?s=128&d=identicon&r=PG";
arr[2] = "http://www.gravatar.com/avatar/54d38793d7a407446999b33b81d607fd?s=128&d=identicon&r=PG";

//for instance i'm using an array to cache your image links
//if you can want these links as your anchor tag "title" attrib just modify the below code

 $(document).ready(function() {  

     var which_image = null; //detect which Image to use
       $(".subCatLinksSelected").hover(function() {

           var catn = $(this).attr('title');
           if(catn == 'cars') {        
               which_image = arr[1];
           } else {
               which_image = arr[2];
           }    
           onMouseOverCatDisplay(which_image, 'Go to: ' + catn,'#0099f9');

       },function() {

          var catn = $("a.subCatLinksSelected").first().attr('title');
          which_image = arr[0]
          onMouseOverCatDisplay(which_image,'You see: ' + catn, '#000');

       });
    });


 function onMouseOverCatDisplay(catimg, catnaam, color) {

    $('#ctl00_ContentPlaceHolder1_men_imgCat').attr('src',catimg);

    $("#lh")
        .css({opacity:0.2,color:"#1c1c1c"})
        .html(catnaam)
        .css({color: color})
        .stop()
        .animate({opacity:1 },2000);
  }

$(document).ready(function () {
    $('div.divLeftCatMenu a').hover(
    function () {
        $(this).stop().animate({ color: '#E90E65', borderBottomColor: '#E90E65' }, 1000);
        var catn = $(this).attr('title');
        $("#lh").html(catn);
    },
    function () {
        $(this).stop().animate({ color: '#CCC6C6', borderBottomColor: '#3e3e3e' }, 1000);
        var catn = $("a.subCatLinksSelected").attr('title');
        $("#lh").html(catn);
    });