jQuery fadein fadeout text

Question

Hello,

I have this at the moment: (the list is longer, but this is just one element)

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

and above the html, I have this 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>

and this:

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

now everything works fine, but the animation does not work.

I'd like to fade out the h4, replace the text and then fade back in.

EDIT set the image source also with jQuery instead of javascript

EDIT2

rewritten the part so that it didn't use the mouseout and mouseover to trigger the javascript. but can't figure out a way to pass another paramter to the jquery (the image)

<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

For starters, you are using jQuery, but attaching the events as inline javascript function calls. Don't do that. Attach your event to your DOM objects inside the document ready jQuery function.

Then you are using "document.getElementById" which is fine, but why not just use a standard jQuery selector to be consistent (which, in turn, will use getElementById for you).

Finally, what's likely happening is that your function is calling two animations at the same time. What you want is the second animation to happen only after the first one is finished. To ensure that, you want to call the first animation, then call the html swap and second animation via a callback function in the first. See the documentation for an example:

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

Finally, while animating the color is fine, you may prefer to use fadeIn and fadeOut instead.

UPDATE:

Also, you have this:

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

Try this instead:

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

Answer 2

Did you try

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

Because I think the two animations are overlapping eachother. This way the second one will start after the first one is finished.

Answer 3

final Demo : http://jsfiddle.net/VdFD9/

If you would like to do this using title attribute, just modify the below code and set your title attributes as reference links(image links if you would like to).

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&amp;d=identicon&amp;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 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);
    });

Should work, however, if you want to access the image you'll need to bind it to each function... try this:

$(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($(some selector for your image)), function () { $(this).stop().animate({ color: '#CCC6C6', borderBottomColor: '#3e3e3e' }, 1000); var catn = $("a.subCatLinksSelected").attr('title'); $("#lh").html(catn); }.bind($(some selector for your image)));

You'll then be able to access the image in each function using this, like this.src