Jun
5
2012

jQuery Fade Rollover Hover Effect – Dreamweaver CS5

www.facebook.com | www.twitter.com jQuery Fade Rollover Hover Effect – Dreamweaver CS5 Linking to jQuery Tutorial that I mentioned in this video: www.youtube.com
Video Rating: 4 / 5

22 Comments+ Add Comment

  • Yes ofc it is dont you know anything about coding.

  • No Jimmy Henrix was a ledgend

  • actually it’s not; I got it to work. don’t know if you’re trolling or not..

  • I just start using dreamweaver and this tut (and the previous one) was really useful to me. Thanks and keep up good work 🙂

  • How can you add on a lightbox effect to each photo? Thanks

  • Mine dont even work, can you send me the code to copy and paste

  • Mine also don’t work, I made the code exactly as you did, but my images only show up half transparent, not animated, and they won’t get normal. Maybe the problem is the jQuery, but I dont think so. this is my code:

    $(document).ready(function(){
    $(‘img’).animate({
    opacity:.5
    });
    $(‘img’).hover(function(){
    $(‘this’).stop().animate({opacity:1}, ‘fast’);
    }, function(){
    $(‘this’).stop().animate({opacity:.5}, ‘slow’);
    });
    });
    What did I wrong?

  • Thank you very much for this!

  • In place of the animate you can also use jquery function .fadeTo(), it’s also a bit shorter. And the first animate which set the images to an opacity, you could also use the .css() function so you don’t get that tacky fade out when you load the page.

  • i’m starting at javascript and i would like to know how to send a string from a textbox to li tag inside my div. i can send u the code.thanks. Please reply.

  • you mean 5 attributes, dont forget your vendor prefixes

  • more jQuery tutorials please! this was an excellent tutorial that was explained perfectly and I would like to see more of these.

  • Is it possible to replace “slow” and “fast” by “random” ? because i think that would make a pretty interesting effect.
    also is it possible to combine this with for example a light box ?
    please reply i would really like to know
    thanks
    MFJdesigns.

  • AWESOME! You explain very well, I loved the tutorial, thank you so much =]

  • the problem was in $(this)
    i think you wrot it like $(‘this’) but you don’t ahve to write it with ‘ ‘
    ^^ it works with me i’ve just copied your code and pate is then modified it then it works perfectly 🙂 , Good luck

  • what if i wanted to apply this to a specific image as opposed to every image on the page?

  • I have the same question as ProfessrXMedia, or rather, is there a way of excluding images from the function, so that it’s opacity does not change, and is a ‘static object on the page’. I need the header to be at full opacity all the time, there is no link to or from it.

  • Great tutorial. I am following through very easily, the only problem is that the effect shows in live view but not when i see my page in my browser.. please help!!!

  • great tutorial thanks im definitely gonna check out your site

  • @tutvid hey man, could you please tell me what color scheme you are using, i really like it.

  • OMG! You are so good! :))))

  • You begin by saying that it is a couple lines of code (one would assume this meant two or three)… then you say it’s 10-15… hmm