it-swarm.com.de

jquery .slideToggle () horizontale Alternative?

slideToggle macht genau das, was ich will, nur ich möchte, dass die Folie horizontal ist.

Ich habe jetzt eine horizontale Anzeige/Animation und eine Animation zum Klicken, aber ich hätte gerne die Umschaltoptionen. Wenn ich also auf den aktiven Link klicke, wird die Animation umgekehrt wiedergegeben und versteckt sich.

Was wäre der beste Weg, dies zu tun?

49
ThomasCS

Sie können die animate-Methode verwenden: 

$('#element').animate({width: 'toggle'});

http://jsfiddle.net/7ZBQa/

97
undefined

Erstellt eine Geige http://jsfiddle.net/powtac/RqWk2/

$("div").animate({width: 'toggle'});
4
powtac

Es gibt einen anderen Weg, Jquery ui zu verwenden. Siehe api jquery ui Es kann jedoch nicht immer nützlich sein, da es Störungen aufweist

Hier jsfiddle um den Störimpuls zu sehen, werden alle übrigen Elemente nicht reibungslos verschoben .. Ich gebe hier Code ein, aber er sollte mit jQuery UI 1.10.3 verwendet werden.

js

$( document ).click(function() {
  $( "#toggle" ).toggle('slide');
});

css 

.t {
    width: 100px;
    height: 100px;
    background: #ccc;
    display: inline-block;
    float: left;
  }

html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<p>Click anywhere to toggle the box.</p>
<div id="toggle" class='t'>1</div>
<div id="" class='t'>2</div>
<div class='t'>3</div>
1

ich habe es ausprobiert und funktioniert super!

hTML Quelltext:

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front">
            <!-- front content -->
        </div>
        <div class="back">
            <!-- back content -->
        </div>
    </div>
</div>

Das CSS /* klappen Sie den Bereich um, wenn Sie mit dem Finger */ .flip-container: hover .flipper, .flip-container.hover .flipper { Transformation: RotateY (180 Grad); }

.flip-container, .front, .back {
    width: 320px;
    height: 480px;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}

ich benutze dies in einem Bootstrap col-sm- * und funktioniert auch super

 <div class="col-sm-4 flip-container" ontouchstart="this.classList.toggle('hover');">
                    <div class="content-box flipper">
                        <div class="content-box-front">
                            <span class="glyphicon glyphicon-envelope content-box-icon"></span>
                            <h4>Share your emotions</h4>
                        </div>
                        <div class="content-box-back">
                            <p>Share emotions with friends, family and teammates.</p>
                            <button>Read more</button>
                        </div>
                    </div>
                </div>

die css

.content-box
{
    position: relative;
    text-align: center;
    height: 105px;
    width: 100%;
}
.content-box-icon
{
    font-size: 30px;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    text-align: center;
    display: block;
    margin: 5px auto 15px auto;
    color: #fff;
    float: none; 
    background:#25acfd                     
}
.content-box-front
{
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 105px;
}
.content-box-back
{
    transform: rotateY(180deg);
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 105px;
}
/* entire container, keeps perspective */
    /* flip the pane when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}
0
user3683003

Wenn Sie es kontinuierlich benötigen, können Sie setTimeinterval wie folgt einrichten

<?php
setInterval(function (){
$('div').animate({width: 'toggle'});
},200);
?>
0
kimoduor

Wenn Sie zwischen zwei Breiten wechseln möchten, können Sie wie folgt vorgehen:

$('#A').click(function(){
if($(this).width() > 20){
$(this).animate({width: '20px'})
}
else{
$(this).animate({width: '50%'})
}
});
#A{
  float:left;
  width:50%;
  height:300px;
  background:red;
}
#B{
  min-height:300px;
  background:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="A">
</div>
<div id="B">
<span>Some stuff</span>
</div>

0
sjsam