Возвращение div в исходное состояние

Question

Я новичок в JQuery, так как в основном это первый раз, когда я использовал его, я читал документацию, что мне нужно делать, и я застрял.

HTML

<div class="commercialpopup"> 
    <p class="close-div">x<p> 
    <p><a href="blueindex.php">Go to Commercial</a></p> 
</div> 

CSS

.commercialpopup { 
    background-color: #038CDB; 
    border-bottom: 3px solid #FFFFFF; 
    border-right: 3px solid #FFFFFF; 
    border-top: 3px solid #FFFFFF; 
    border-radius: 0 0 20px; 
    box-shadow: 2px 2px 5px #888888; 
    color: #FFFFFF; 
    height: 54px; 
    left: 0; 
    padding: 0 10px; 
    position: fixed; 
    top: 31px; 
    width: 158px; 
    z-index: 9999; 
    transition: border-color 0.5s linear; 
    -moz-transition: border-color 0.5s linear; /* FF3.7+ */ 
    -o-transition: border-color 0.5s linear;  /* Opera 10.5 */ 
    -webkit-transition: border-color 0.5s linear; /* Saf3.2+, Chrome */ 
} 

.commercialpopup a{ 
    color: #FFF; 
    transition: color 0.5s linear; 
    -moz-transition: color 0.5s linear; /* FF3.7+ */ 
    -o-transition: color 0.5s linear;  /* Opera 10.5 */ 
    -webkit-transition: color 0.5s linear; /* Saf3.2+, Chrome */ 
} 

.close-div{ 
    color: #FFFFFF; 
    float: right; 
} 

.close-div:hover{ 
    color: #999999; 
    cursor: pointer; 
} 

.commercialpopup:hover{ 
    border-bottom: 4px solid #007BCA; 
    border-right: 4px solid #007BCA; 
    border-top: 4px solid #007BCA; 
} 

.commercialpopup a:hover{ 
    text-decoration: none !important; 
} 

Jquery

$(".close-div").click(function() { 
    $(this).parent().fadeOut("slow"); 
}); 

//this is the part I need help with 
$("div.commercialpopup").hover(function() { 
    $(this).animate({ 
     width: "200px", 
     fontSize: "1.1em", 
    }, 1500); 
}); 

Что мне нужно сделать, это сделать так, чтобы когда мышь не нависает над div, она возвращается к исходному CSS через реверсирование анимации. Я знаю, что это, вероятно, кажется довольно простым, но я застрял и уже несколько часов. Я рассмотрел .mouseover/.mouseout, а также .addclass/.removeclass, но я не мог использовать эти два метода.

Вот jsfiddle

Answer 1

Fiddle Link

JS

$("div.commercialpopup").hover(function() { 
    $(this).animate({ 
     width: "200px", 
     fontSize: "1.1em", 
    }, 1500); 
}, 
function() { 
    $(this).animate({width: "158px", 
      fontSize: "1em", 
    }, 1500); 
}); 

Answer 2

при использовании парить, вы можете предоставить две функции, первая, когда мышь находится на элементе, то второй, когда она покидает его, так что было бы, как

$("div.commercialpopup").hover(function() { 
    $(this).animate({ 
     width: "200px", 
     fontSize: "1.1em", 
    }) 
    }, function() { 
     //change back to normal code 
    } 
); 

Answer 3

$("div.commercialpopup").mouseenter(function() { 
$(this).animate({ 
    width: "200px", 
    fontSize: "1.1em", 
}, 1500); 
}); 

$("div.commercialpopup").mouseleave(function() { 
$(this).animate({ 
    width: "100px", 
    fontSize: "1em", 
}, 1500); 
}); 

Просто используйте мышь, чтобы вернуть div в исходный размер.

EDIT: вы также можете использовать CSS3 для этого, google для перехода и анимации.

Answer 4

магазин исходные значения CSS, которые вы собираетесь анимировать, таким образом, вы можете изменить стили, и это не повлияет на анимации, как значения не жёстко:

$("div.commercialpopup").each(function() { 
    $(this).data({width: $(this).css('width'), font: $(this).css('font-size')}); 
}).on({ 
    mouseenter: function() { 
     $(this).animate({ 
      width: "200px", 
      fontSize: "1.1em", 
     }, 1500); 
    }, 
    mouseleave: function() { 
     $(this).animate({ 
      width: $(this).data('width'), 
      fontSize: $(this).data('font'), 
     }, 1500);  
    } 
}); 

FIDDLE

Answer 5

В основном вам нужно запомнить предыдущее состояние объекта до выполнения зависания. Вы можете использовать функцию .data() jQuery, чтобы запомнить предыдущее состояние объекта. В примере, который я предоставляю, требуется только поддерживать код hoverstate в коде. и вытаскивает исходное состояние из вашего css.

Вот скрипку показывает мой пример и ниже код для примера

http://jsfiddle.net/ymS28/12/

$(document).ready(function() { 
    $(".close-div").click(function() { 
     $(this).parent().fadeOut("slow"); 
    }); 

    $("div.commercialpopup").hover(function() { 
     var $this = $(this); 
     $this.animate((function() { 
      //Initialize the hoverState 
      if (!$this.data("hoverState")) { 
       $this.data("hoverState", { 
        width: "200px", 
        fontSize: "1.1em", 
       }); 
      } 
      //Get hoverState 
      var hoverState = $this.data("hoverState"); 
      //Set HoverState 
      $this.data("hoverState", { width: $this.width(), fontSize: $this.css("font-size") }); 
      //return hoverstate to the .animate() function 
      return hoverState; 
     })(), 1500); 
    }); 
}); 

Answer 6

Как и другие уже предложили, вам необходимо сохранить исходное состояние дел. Посмотрите на этот фрагмент кода.

var originalStyle = window.getComputedStyle(this, null); 
$('div.commercialpopup').mouseover(function() { 
    $(this).animate({ 
    width: '200px', 
    fontSize: '1.1em' 
    }, 1500); 
}); 

$('div.commercialpopup').mouseout(function() { 
    $(this).animate({ 
    width: originalStyle.style['width'] 
    fontSize: originalStyle.style['font-size'] 
    }, 1500); 
});