JQuery Title Attribute this function

I have made a script that should complete the HTML of a div with the title of a link onMouseover. It is not working.

THE CODE

function title(id) {
    var thetitle = $(id).attr('title');
    $('#top_video_title').fadeTo(100, 0.001);
    $('#top_video_title').html(thetitle, function(){
      $('#top_video_title').fadeTo(200, 1);
    });
    return false;


}

The HTML

<a href="#" onmouseover="title(this开发者_如何学Go);" onmouseout="titleout()" title="testing">test</a>
<a href="#" onmouseover="title(this);" onmouseout="titleout()" title="testing2">test2</a>

Any ideas?

Marvellous

this

not equals

$(this)

See also this interesting article.

I think you better send your jQuery object as a parameter of your function:

function title(id) {
    var thetitle = id.attr('title');
    $('#top_video_title').fadeTo(100, 0.001);
    $('#top_video_title').html(thetitle, function(){
      $('#top_video_title').fadeTo(200, 1);
    });
    return false;
}

and then use $(this) in your html:

<a href="#" onmouseover="title($(this));" onmouseout="titleout()" title="testing">test</a>
<a href="#" onmouseover="title($(this));" onmouseout="titleout()" title="testing2">test2</a>

It would appear that JQuery does not facilitate the use of a function called title(). I do not know if this is because it is used in compilation of the API but as soon as the function name was changed the entire function worked perfectly.

The firebug report on it before we changed the function name was - CANNOT FIND FUNCTION.

function titlein(id) {
    var thetitle = $(id).attr('title');
    $('#top_video_title').fadeTo(50, 0.001, function() {
     $('#top_video_title').html(thetitle);
      $('#top_video_title').fadeTo(200, 1);});
    return false;
 }

Marvellous

I'd suggest doing this instead:

$(document).ready( function() {
    /* all links with a title -- alternatively, target with classes or ids */
    $("a[title]").hover( function(e) { /* function formerly known as "title" */

        /* "this" variable in event listener is automatically
        the element the event was called on*/
        var thetitle = $(this).attr('title');

        /* duration == 100 ms
           opacity == 0.001
           callback -> called after finished fading out
        */
        $('#top_video_title').fadeTo(100, 0.001, function(){
          $('#top_video_title').html(thetitle);
          $('#top_video_title').fadeTo(200, 1);
        });
        return false;
    }
    , function(e) {/* function formerly known as "titleout", suitably modified*/
    });
})

And then this for the HTML:

<!-- no more inline JS :-) -->
<a href="#" title="testing">test</a>
<a href="#" title="testing2">test2</a>