I welcome help to finish jquery. when Hover is on the block, the first block should disappear with the SlideUp style, and behind it should fill the second block with the same SlideUp style. and when you delete the mouse arrow, the reverse style with SLideDown In my cases, they disappeared quickly, those cursor cost in the hover style and in that the reverse script is applied. They should stand while the cursor is standing. JSFiddle code .

HTML:

<div id="objects"> <div class="advantage"> <p class="h2">Этот блок должен исчезать с стилем slideUp</p> </div> <div class="advantage-hover"> <p class="h2">Этот блок должен появляться после исчезнование первого блока с стилем slideUp</p> </div> </div> <!-- То есть второй блок advantage-hover заменять плавно первого блока -->

CSS:

 .advantage { width:130px; height:130px; background:red; } .advantage-hover { display:none; width:130px; height:130px; background:blue; }

Js:

 $().hover( function() { $(.advantage).slideUp(); $(.advantage-hover).slideUp(); }, function() { $(.advantage).slideDown(); $(.advantage-hover).slideDown(); } );

    1 answer 1

    Here is the solution to your problem: http://jsfiddle.net/shugich/nbLhfp67/1/

     $('.advantage').on('mouseenter', function() { $(this).slideUp() $('.advantage-hover').slideDown(); }); $('.advantage-hover').on('mouseleave', function() { $(this).slideUp() $('.advantage').slideDown(); }); 
     * { margin: 0; padding: 0; } .advantage { width: 130px; height: 130px; background: red; } .advantage-hover { background: blue; width: 130px; height: 130px; display: none; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div id="objects"> <div class="advantage"> <p class="h2">Этот блок должен исчезать с стилем slideUp</p> </div> <div class="advantage-hover"> <p class="h2">Этот блок должен появляться после исчезнование первого блока с стилем slideUp</p> </div> </div> <!-- То есть второй блок advantage-hover заменять плавно первого блока -->