Transition effect on jQuery

Question

Transition effect on jQuery

Asked 10 years, 8 months ago

Viewed 5,119 times

5

I’m starting in jQuery and I have a question: is there any way to let the change down with a kind of transition?

  <html>
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js">   </script>
   <meta charset="utf-8" />
    <script>
    $(document).ready(function(){
        $('#image1').on("mousemove", function(){
            $(this).attr("src","http://3.bp.blogspot.com/-fm0ZV85Pz1I/TtgsNO69MLI/AAAAAAAACZw/pRDZIHWCUO4/s1600/idealhomemagazinedotcodotuk24.jpg");
        })
        $('#image1').on("mouseout", function(){
            $(this).attr("src","http://2.bp.blogspot.com/_6lVUS4YoEPU/TQqw1vActVI/AAAAAAAAB0U/suTAg3xbBB8/s1600/arranjosnatal8.jpg");
        })
    })
    </script>
    <body>
      <img src="http://2.bp.blogspot.com/_6lVUS4YoEPU/TQqw1vActVI/AAAAAAAAB0U/suTAg3xbBB8/s1600/arranjosnatal8.jpg" id="image1" />
    </body>
    </div>
 </html>

I wanted the picture to change with a transition.

I do not find it interesting to javascript src the image to make a transition, because depending on the size it may take to load. Think about placing the two images on the page being that of "Mousemove" with None display and make the transitions by fadein/fadeOut

– Paulo

2014/03/21 at 02:33

1 answer

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.

by Sergio • **133,294** points · Answer 1 · 2014-03-20T22:46:44+00:00

You have two options:

Using CSS Transitions in the background image.

In this case we need an element divinstead of an image and this element is assigned a backgroung-image.

background-image:url('imagem.jpg');
background-repeat:no-repeat;
transition: background-image 0.5s ease-in-out;

Example

Using jQuery to fade in and fade out

The best option would be to have the two images already present on the page, probably superimposed and fadeOut the one on top. This avoids problems when loading a new image when changing the src.

But to answer your question with your code a simple transition option is to fade out / fade in. In the example below I did not assign speed to fade, but is also possible with different fade speed.

    $this = $(this);              // colocar o $(this) em memória
    $this.fadeOut(function () {   // começar um fadeOut que corre uma função quando tiver terminado
        $this.attr("src", url);   // mudar a src (com o elemento invisivel)
    });
    $this.fadeIn();               // fazer fadeIn já com a nova imagem

Example

You are using the event mousemove, in my example I used the hover to make it easier to see the effect.