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

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

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

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

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

最后，虽然动画颜色很好，但您可能更喜欢使用fadeIn和fadeOut。

更新：

另外，你有这个：

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

请改为尝试：

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

Answer 2

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

如果您想使用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 3

你试过吗

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

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

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'）。悬停（ function（）{ $（this）.stop（）。animate（{color：'＃E90E65'，borderBottomColor：'＃E90E65'}，1000）; var catn = $（this）.attr（'title'）; $（ “＃LH”）HTML（catn）; } .bind（$（某个图像选择器））， function（）{ $（this）.stop（）。animate（{color：'＃CCC6C6'，borderBottomColor：'＃3e3e3e'}，1000）; var catn = $（“a.subCatLinksSelected”）。attr（'title'）; $（ “＃LH”）HTML（catn）; } .bind（$（您图片的某个选择器）））;

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

jQuery fadein fadeout文本

4 个答案: