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

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

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

Наконец, вероятно, ваша функция вызывает две анимации одновременно. То, что вы хотите, это вторая анимация, которая должна появиться только после завершения первой. Чтобы убедиться, что вы хотите вызвать первую анимацию, затем вызовите HTML-своп и вторую анимацию через функцию обратного вызова в первой. См. Документацию для примера:

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

Наконец, хотя анимация цвета в порядке, вы можете вместо этого использовать fadeIn и fadeOut.

UPDATE:

Кроме того, у вас есть это:

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

Попробуйте вместо этого:

 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

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

Должно работать, однако, если вы хотите получить доступ к изображению, вам нужно привязать его к каждой функции ... попробуйте это:

$ (документ) .ready (function () { $ ('div.divLeftCatMenu a'). hover ( function () { $ (this) .stop (). animate ({цвет: '# E90E65', borderBottomColor: '# E90E65'}, 1000); var catn = $ (this) .attr ('title'); . $ ( "#") АЯ HTML (catn); } .bind ($ ( некоторый селектор для вашего изображения )) , function () { $ (this) .stop (). animate ({цвет: '# CCC6C6', borderBottomColor: '# 3e3e3e'}, 1000); var catn = $ ("a.subCatLinksSelected"). attr ('title'); . $ ( "#") АЯ HTML (catn); } .bind ($ ( некоторый селектор для вашего изображения )) );

После этого вы сможете получить доступ к изображению в каждой функции, используя this , например this.src

Answer 4

Вы пробовали

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

Потому что я думаю, что две анимации накладываются друг на друга. Таким образом, второй будет запущен после окончания первого.