ancho de alternar cambiar el tamaño de la animación - jquery

Question

Tengo <div id="test"></div> y <a id="trigger"></a>. Div tiene ancho 300px. Quiero que el div cambie el tamaño a 100 píxeles cuando el usuario haga clic en el desencadenador y desee cambiar el tamaño al tamaño anterior cuando el usuario vuelva a hacer clic en el desencadenador. ¿Cómo puedo hacer esto usando jquery?

Gracias de antemano ... :)

blasteralfred

Answer 1

Asignar una variable de 1 a 0 de clic y clic y desmarque y luego utilizar la función .click de la siguiente manera:

$(document).ready(function(){ 
    TriggerClick = 0; 

    $("a#trigger").click(function(){ 
    if(TriggerClick==0){ 
     TriggerClick=1; 
     $("div#test").animate({width:'100px'}, 500); 
    }else{ 
     TriggerClick=0; 
     $("div#test").animate({width:'300px'}, 500); 
    }; 
    }); 
}); 

ACTUALIZACIÓN - MEJOR RESPUESTA

hice esta sugerencia de un rato espalda; pero creo que hay un enfoque más elegante y pragmático para resolver esto. Se podría utilizar transiciones CSS y tienen jQuery sólo tiene que añadir/eliminar una clase que inicia la transición:

violín de Trabajo: https://jsfiddle.net/2q0odoLk/

CSS:

#test { 
    height: 300px; 
    width: 300px; 
    background-color: red; 

    /* setup the css transitions */ 
    -webkit-transition: width 1s; 
    -moz-transition: width 1s; 
    transition: width 1s; 
} 

#test.small { 
    width: 100px; 
} 

jQuery:

$("a#trigger").on('click', function(){ 
    $("div#test").toggleClass('small'); 
}); 

Answer 2

Es necesario enlazar un .click() - Evento de #trigger y alternar la animación.

http://api.jquery.com/toggle/

Answer 3

Algo como esto debería para el truco.

$('#trigger').bind('click', function() { $('#test').animate({"width": "100px"}, "slow"); }) 

Answer 4

Esto es Html Part de esta alternancia:

<div id="start"> 
    <div class="slide"></div> 
</div> 

Ésta es CSS part para ello:

<style> 
    #start{ margin-bottom:60px; display:block; font-size:16px; width:14px; height:79px; position:relative; top:25px; line-height:21px; color:#F0F; background:url(./start1.JPG) left top no-repeat;}  
    .slide{ background:#98bf21; max-width:500px; width:100; height:100px;position:absolute; left:14px;} 
</style> 
    <script> 
     $(document).ready(function() 
     { 
      function tog() 
      { 
       var w = $(".slide").css('width'); 

       if(w=='0px') 
       { 
        $(".slide").animate({ 
        width:500 
       }); 
      } 
      else 
      { 
       $(".slide").animate({ 
       width:0 
       }); 
      } 
     } 

     $("#start").click(function() 
     { 
      tog(); 
     }); 
     }); 
    </script> 

Answer 5

Para aquellos que buscan una más corta pero la versión aún trabaja usted podría hacer esto:

$('a#trigger').on('click', function(e) { 
    e.preventDefault(); 
    var w = ($('div#test').width() == 300 ? 100 : 300); 
    $('div#test').animate({width:w},150); 
}); 

La versión más corta:

$('a#trigger').on('click', function(e) { 
    e.preventDefault(); 
    $('div#test').animate({width:($('div#test').width() == 300 ? 100 : 300)},150); 
}); 

En una función:

function toggleWidth(target, start, end, duration) { 
    var w = ($(target).width() == start ? end : start); 
    $(target).animate({width:w},duration); 
    return w; 
} 

Uso:

$('a#trigger').on('click', function(e) { 
    e.preventDefault(); 
    toggleWidth($("div#test"), 300, 100, 150); 
}); 

último en una JQuery.fn.extender la función:

jQuery.fn.extend({ 
    toggleWidth: function(start, end, duration) { 
     var w = ($(this).width() == start ? end : start); 
     $(this).animate({width:w},duration); 
     return w; 
    } 
}); 

Uso:

$('a#trigger').on('click', function(e) { 
    e.preventDefault(); 
    $("div#test").toggleWidth(300, 100, 150); 
});