Transition effect in jQuery

Question

Transition effect in jQuery

Navigation

#1 by (2 votes)
#2 by (1 votes)

5

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

  <html>
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script><metacharset="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 image to change with a transition.

javascript html jquery css

asked by anonymous 20.03.2014 / 23:25

2 answers

1

I suggest you, whenever you can, try to think of a way to make your effects using CSS3 instead of JavaScript.

Here is a link to the code you need working with only a few CSS3 lines: link

This is your HTML:

<div>
  <img src="http://3.bp.blogspot.com/-fm0ZV85Pz1I/TtgsNO69MLI/AAAAAAAACZw/pRDZIHWCUO4/s1600/idealhomemagazinedotcodotuk24.jpg"alt="">
  <img src="http://2.bp.blogspot.com/_6lVUS4YoEPU/TQqw1vActVI/AAAAAAAAB0U/suTAg3xbBB8/s1600/arranjosnatal8.jpg"alt="">
</div>

And here's your CSS:

div {
  position: relative;
}
div img {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.4s;
}
div img:last-child {
  opacity: 0;
}
div:hover img:first-child {
  opacity: 0;
}
div:hover img:last-child {
  opacity: 1;
}

And here is a link if you want to know more about transitions:

link

21.03.2014 / 00:15

Query gets slow with ORDER BY How do I create a trigger that fires whenever I have an insert event in the table?

score 2 · Accepted Answer

You have two options:

Using CSS transitions in the background image.

In this case, we need a div element instead of an image, and a backgroung-image is assigned to that element.

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

Example

Using jQuery to do fade in and fade out

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

But to answer your question with your code a simple transition option is to do fade out / fade in. In the example below I did not assign speed to the 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 mousemove event, in my example I used hover to make it easier to see the effect.