JQuery FadeIn Fadeout текст

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, замените текст, а затем исчезать обратно.

EDIT установить источник изображения также с 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, просто изменить код и установить ваше название атрибутов в качестве справочных ссылок (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. Не делай этого. Прикрепите свое событие к объектам DOM внутри функции jQuery, готовой к документу.

Тогда вы используете «document.getElementById», что хорошо, но почему бы просто не использовать стандартный селектор jQuery для согласования (который, в свою очередь, будет использовать getElementById для вас).

Наконец, вероятно, что ваша функция одновременно вызывает две анимации. Вы хотите, чтобы вторая анимация произошла только после того, как первая была закончена. Чтобы убедиться, что вы хотите вызвать первую анимацию, затем вызовите html swap и вторую анимацию с помощью функции обратного вызова в первой. Смотрите документацию для примера:

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

Наконец, в то время как оживляющий цвет отлично, вы можете предпочесть использовать FadeIn и FADEOUT вместо этого.

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