webentwicklung-frage-antwort-db.com.de

breite ändern Animation - jquery

Ich habe <div id="test"></div> und <a id="trigger"></a>. Div hat eine Breite von 300px. Ich möchte, dass das div die Größe auf 100px ändert, wenn der Benutzer auf den Auslöser klickt, und dass die Größe auf die vorherige Größe geändert wird, wenn der Benutzer erneut auf den Auslöser klickt. Wie kann ich das mit jquery machen ??

Vielen Dank im Voraus ...:)

blasteralfred

javascriptjqueryjquery-uijquery-animate
12
blasteralfred Ψ

Weisen Sie eine Variable von 1 für click und 0 für unclick zu und verwenden Sie dann die .click-Funktion wie folgt:

$(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);
    };
  });
});

UPDATE - BESSERE ANTWORT

Ich machte diesen Vorschlag vor einiger Zeit; Aber glauben Sie, es gibt einen eleganteren und pragmatischeren Ansatz, um dies zu lösen. Sie könnten CSS-Übergänge verwenden und von jquery einfach eine Klasse hinzufügen/entfernen lassen, die den Übergang initiiert:

Working Fiddle: 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');
});
29
sadmicrowave

Dies ist der Html Part dieses Umschalters:

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

Das ist CSS part dafür:

<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>
2
Pramod Kumar Gangwar

So etwas sollte zum Trick werden.

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

Für diejenigen, die eine kürzere, aber dennoch funktionierende Version suchen, können Sie dies tun:

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

Die kürzeste Version:

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

Auf einer Funktion:

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

Verwendungszweck:

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

Schließlich auf einer JQuery.fn.extend-Funktion:

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

Verwendungszweck:

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

Sie müssen ein .click () - Ereignis binden, um # die Animation auszulösen und umzuschalten.

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

http://api.jquery.com/animate/

0
Sutuma