Как написать следующий jQuery немного лучше? (fading)

Question

Я новичок в jQuery, и мне интересно, как лучше написать следующий код?

$("p:first").css({opacity:0.5}) 
$("p:first").mouseover(function() { 
    $(this).fadeTo("fast", 1); 
}); 
$("p:first").mouseout(function() { 
    $(this).fadeTo("fast", 0.5); 
}); 

Answer 1

Вы можете использовать JQuery chaining, а также метод hover обертывания/mouseleave функции mouseenter аккуратным способом:

$("p:first").css({opacity:0.5}) 
    .hover(function() { 
     $(this).fadeTo("fast", 1); 
    }, function() { 
     $(this).fadeTo("fast", 0.5); 
    }); 

Если вам нужно mouseover , mouseout, а не enter/leave вы c использовать .on перегрузки:

$("p:first").css({opacity:0.5}) 
    .on({ 
     mouseover: function() { 
      $(this).fadeTo("fast", 1); 
     }, 
     mouseout: function() { 
      $(this).fadeTo("fast", 0.5); 
     } 
    }); 

Answer 2

Вы должны использовать цепочки

$("p:first").css({ 
    'opacity': 0.5 
}).on({ 
    mouseover: function() { 
    $(this).fadeTo("fast", 1); 
    }, 
    mouseout: (function() { 
    $(this).fadeTo("fast", 0.5); 
    } 
}); 

Answer 3

$("p:first").css({opacity:0.5}).on({ 
    mouseover:function() { 
     $(this).fadeTo("fast", 1); 
    }, 
    mouseout:(function() { 
     $(this).fadeTo("fast", 0.5); 
    } 
}); 

Answer 4

Вы можете использовать chaining вместе с .hover(), чтобы выполнить свою задачу.

Try,

$("p:first").css({'opacity':0.5}).selector.hover(function() { 
             $(this).fadeTo("fast", 1); 
            },function() { 
             $(this).fadeTo("fast", 0.5); 
            }); 

Answer 5

Как насчет:

$("p:first").css({opacity:0.5}) 
    .hover(function() { 
     $(this).fadeTo("fast", 1); 
    }, 
    function() { 
     $(this).fadeTo("fast", 0.5); 
    });