Geek Answers Handbook

Decay one div to another: make it more stable, remove the white pause, a few decays

I have a test setup where a miniature div disappears in another div, however there are some problems with it.

  • How to remove a white pause? At the moment, it fades one div to white, then disappears in the second div. How can I make it fade from one div to another without fading to white?
  • This is a little unstable if you quickly hover over the mouse and a second div appears below the original. How can I make it more stable?
  • I have several sketches with different images and text in each, how to configure the grid to turn on several boxes without turning them on / off simultaneously (separately).

Here is the code:

Javacript:

<script type="text/javascript"> $(document).ready(function(){ $(".phase-2").hide(); }); $(function(){ $('.grid-box').hover( function(){ $('.grid-box .phase-1').fadeOut(300, function(){ $('.grid-box .phase-2').fadeIn(300); }); }, function(){ $('.grid-box .phase-2').fadeOut(300, function(){ $('.grid-box .phase-1').fadeIn(300); }); } ); }); </script>

HTML:

 <div class="grid-box"> <div class="phase-1"> <img class="grid-image" src="http://teamworksdesign.com/v2/wp-content/themes/default/images/dtr.jpg" alt="" height="152" width="210" /> <div class="grid-heading"> <h2>DTR Medical</h2> <h3>Branding, Web, Print</h3> </div> </div> <div class="phase-2"> <div class="grid-info"> <h4>Probeything 2000</h4> <p>Marketing unglamorous single-use medical intruments is not simple. We helped Neurosign increasetheir sales by 25% and increasemarket awareness.</p> </div> <div class="grid-heading-hover"> <h2>DTR Medical</h2> <h3>Branding, Web, Print</h3> </div> </div>

+4
source share
2 answers

1) Instead of fadeIn the hover element on the callback, do it immediately. This will prevent the white background from being displayed:

 $('.grid-box .phase-1').fadeOut(300); $('.grid-box .phase-2').fadeIn(300);

2) The easiest way to do this is to specify the size in the thumbnail container and add overflow: hidden; to him.

3) Finally, the following code ensures that only elements contained in a hovering div are affected:

 $(function(){ $('.grid-box').hover( function(){ $('.phase-1', this).fadeOut(300); $('.phase-2', this).fadeIn(300); }, function(){ $('.phase-2', this).fadeOut(300) $('.phase-1', this).fadeIn(300); } ); });
+7
source

HTML

 <div class="grid-box"> <div class="phase-1"></div> <div class="phase-2"></div> </div>

Jq

 $(document).click(function (){ $('.grid-box .phase-1').animate({opacity:50},2000).queue(function(){ $(this).hide(); }); $('.grid-box .phase-2').fadeIn(2000); });

CSS

 .phase-1{width: 100px;height: 100px;background: red; position:absolute;} .phase-2{width: 100px;height: 100px;background: blue;display: none; position:absolute;}

I know this is not exactly what your code looks like, but you can understand what I mean in a simple explanation.

here is a demonstration of this in jsfiddle http://jsfiddle.net/NxJf8/

+1
source

More articles:


All Articles