jQuery的淡入淡出文本

Question

我有这样的时刻：（名单是更长的时间，但是这仅仅是一个元素）

<a href="Products.aspx" 
    onmouseover="onMouseOverCatDisplay(&quot;H5032.jpg&quot;, &quot;Go to: cars&quot;);"  
    onmouseout="onMouseOverCatDisplay(&quot;DSC_0414_SS.jpg&quot;, &quot;You see: bike&quot;);">Car</a> 

和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的（图像）

<script type="text/javascript"> 
    $(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); 
     }); 

Answer 1

最终演示：http://jsfiddle.net/VdFD9/

如果你想做到这一点使用title属性，只需修改下面的代码，并将其设置为参考链接你的title属性（image links如果你想）。

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" /> 

的JavaScript：

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); 
    } 

Answer 2

对于初学者来说，你正在使用jQuery，但附加的事件内嵌的JavaScript函数调用。不要这样做。将您的事件附加到文档就绪jQuery函数内的DOM对象。

然后你使用“document.getElementById”这很好，但为什么不只是使用标准的jQuery选择器是一致的（反过来，它会使用getElementById）。

最后，可能发生的情况是您的函数在同一时间调用两个动画。你想要的是第二个动画只有在第一个动画完成后才会发生。为了确保你想调用第一个动画，然后通过第一个回调函数调用html交换和第二个动画。请参阅文档中的示例：

http://api.jquery.com/animate/

最后，尽管动画的颜色很好，你可能更愿意使用淡入淡出和代替。

UPDATE：

而且，你有这样的：

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

试试这个：

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

Answer 3

你尝试

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

因为我觉得两个动画与eac重叠hother。这样第二个将在第一个完成后开始。

Answer 4

$(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); 
    }); 

应该工作，但是，如果你想访问你需要将其绑定到每个图像功能...试试这个：

$（document）.ready（function（）{（'div.divLeftCatMenu a'）。hover（ function（）{（this）.stop（）。animate（{color：'＃E90E65'， borderBottomColor：'＃E90E65'}，1000）; var catn = $（this）.attr（'title'）; $（“＃lh”）。html（catn）; } .bind（$（一些选择的图像））， 函数（）{$ （本）.stop（）动画（{颜色： '＃CCC6C6'，borderBottomColor： '＃3e3e3e' }，1000）; var catn = $（“a.subCatLinksSelected”）。attr（'title'）; $（“＃lh”）。html（catn）; } .bind（$（某些选择器为您的图片）））;

然后，您就可以使用这访问图像中的每个功能，如this.src