Ändern der Marge beim Klicken und dann beim zweiten Klick

Question

Ich versuche, eine einfache Folie Animation von "mouseenter"/"mouseleave" auf größeren Bildschirmen zu einer "Klick" -Funktion auf kleineren Bildschirm zu konvertieren, kann aber nicht ganz richtig.

Die Idee dahinter ist ein verstecktes Div mit negativem linken Rand (-220px), das auf 'mouseenter' oder 'click' auf 0 margin schiebt, während das aktuelle Div auf 'mouseleave' mit einem (+ 220px linker Rand). Es funktioniert auf ‚MouseEnter-‘ und ‚mouseleave‘ und auf der ersten ‚Klick‘, aber ich will es zurück auf den zweiten Klick in den Grundzustand zurückkehren, wie es funktioniert auf ‚mouseleave‘

$('#mouseenter').mouseenter(function() { 
 
     $('#mouseenter .box-heading').css('margin-left', '220px'); 
 
     $('#mouseenter .box-hidden-info').css('margin-left', '0'); 
 
    }); 
 

 
    $('#mouseenter').mouseleave(function() { 
 
     $('#mouseenter .box-heading').css('margin-left', '0'); 
 
     $('#mouseenter .box-hidden-info').css('margin-left', '-220px'); 
 
    }); 
 

 
$('#click').click(function() { 
 
     $('#click .box-heading').css('margin-left', '220px'); 
 
     $('#click .box-hidden-info').css('margin-left', '0'); 
 
    });

.box { 
 
    width: 220px; 
 
    height: 220px; 
 
    margin: 10px auto; 
 
    border: 1px solid rgba(0, 0, 0, 0.1); 
 
    border-radius: 50%; 
 
    position: relative; 
 
    -webkit-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
    overflow: hidden; 
 
} 
 

 
.box-heading { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
    -webkit-transition: 1s ease; 
 
    transition: 1s ease; 
 
} 
 

 
.box-hidden-info { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
    -webkit-transition: 1s ease; 
 
    transition: 1s ease; 
 
    margin-left: -220px; 
 
} 
 

 
.box-hidden-info p { 
 
    font-size: 72%; 
 
    width: 200px; 
 
    margin: 0 auto; 
 
    padding: 5px; 
 
} 
 

 
.box h1 { 
 
    font-weight: 100; 
 
    text-transform: uppercase; 
 
    font-size: 120%; 
 
    padding: 10px 0 0 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="box" id="mouseenter"> 
 
        <div class="box-heading"> 
 
        <h1>Mouseenter</h1> 
 
        </div> 
 
        <div class="box-hidden-info"> 
 
        <p>Test text test text</p> 
 
        </div> 
 
       </div> 
 

 
<div class="box" id="click"> 
 
        <div class="box-heading"> 
 
        <h1>click</h1> 
 
        </div> 
 
        <div class="box-hidden-info"> 
 
        <p>Test text test text</p> 
 
        </div> 
 
       </div>

Answer 1

Verwenden .toggleClass() Funktion anstelle von .click()

$('#mouseenter').mouseenter(function() 
 
{ 
 
    $('#mouseenter .box-heading').css('margin-left', '220px'); 
 
    $('#mouseenter .box-hidden-info').css('margin-left', '0'); 
 
}); 
 

 
$('#mouseenter').mouseleave(function() 
 
{ 
 
    $('#mouseenter .box-heading').css('margin-left', '0'); 
 
    $('#mouseenter .box-hidden-info').css('margin-left', '-220px'); 
 
}); 
 

 
$('#click').click(function() 
 
{ 
 
    $('#click .box-heading').toggleClass("addLeftMargin"); 
 
    $('#click .box-hidden-info').toggleClass("addLeftMargin"); 
 
});

.addLeftMargin 
 
{ 
 
    margin-left: 220px; 
 
} 
 

 
.box { 
 
    width: 220px; 
 
    height: 220px; 
 
    margin: 10px auto; 
 
    border: 1px solid rgba(0, 0, 0, 0.1); 
 
    border-radius: 50%; 
 
    position: relative; 
 
    -webkit-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
    overflow: hidden; 
 
} 
 

 
.box-heading { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
    -webkit-transition: 1s ease; 
 
    transition: 1s ease; 
 
} 
 

 
.box-hidden-info { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
    -webkit-transition: 1s ease; 
 
    transition: 1s ease; 
 
    margin-left: -220px; 
 
} 
 

 
.box-hidden-info p { 
 
    font-size: 72%; 
 
    width: 200px; 
 
    margin: 0 auto; 
 
    padding: 5px; 
 
} 
 

 
.box h1 { 
 
    font-weight: 100; 
 
    text-transform: uppercase; 
 
    font-size: 120%; 
 
    padding: 10px 0 0 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="box" id="mouseenter"> 
 
    <div class="box-heading"> 
 
     <h1>Mouseenter</h1> 
 
    </div> 
 
    <div class="box-hidden-info"> 
 
     <p>Test text test text</p> 
 
    </div> 
 
</div> 
 

 
<div class="box" id="click"> 
 
    <div class="box-heading"> 
 
     <h1>click</h1> 
 
    </div> 
 
    <div class="box-hidden-info"> 
 
     <p>Test text test text</p> 
 
    </div> 
 
</div>

Answer 2

können Sie jQuery verwenden toggle Funktion

hier

$('#click').toggle(function() { 
    //move right 
}, function() { 
    //move left 
}); 

Weitere Details ein anderes Verhalten auf alternativen Klick haben https://api.jquery.com/toggle-event/

Answer 3

Sie können die gesamte mouseenter/mouseleave Funktion mit CSS ersetzen :hover

#mouseenter:hover .box-heading { 
    margin-left: 220px; 
} 
#mouseenter:hover .box-hidden-info { 
    margin-left: 0; 
} 

für das Click-Teil, Sie toggleClass() verwenden sollten, auf dem Element selbst, so:

$('#click').click(function() { 
    $(this).toggleClass('click'); 
}); 

Dann in Ihrem CSS, Stil, wie die untergeordneten Elemente #click aussehen sollte, wenn die Eltern die Klasse hat .click ihm hinzugefügt.

einige Codes zu ersparen, können Sie den :hover CSS Teil nur ändern, so dass es umfasst auch den .click Zustand:

#mouseenter:hover .box-heading, 
#click.click .box-heading { 
    margin-left: 220px; 
} 
#mouseenter:hover .box-hidden-info, 
#click.click .box-hidden-info{ 
    margin-left: 0; 
} 

Voll Code:

$('#click').click(function() { 
 
    $(this).toggleClass('click'); 
 
});

.box { 
 
    width: 220px; 
 
    height: 220px; 
 
    margin: 10px auto; 
 
    border: 1px solid rgba(0, 0, 0, 0.1); 
 
    border-radius: 50%; 
 
    position: relative; 
 
    -webkit-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
    overflow: hidden; 
 
} 
 

 
.box-heading { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
    -webkit-transition: 1s ease; 
 
    transition: 1s ease; 
 
} 
 

 
.box-hidden-info { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
    -webkit-transition: 1s ease; 
 
    transition: 1s ease; 
 
    margin-left: -220px; 
 
} 
 

 
#mouseenter:hover .box-heading, 
 
#click.click .box-heading { 
 
    margin-left: 220px; 
 
} 
 
#mouseenter:hover .box-hidden-info, 
 
#click.click .box-hidden-info{ 
 
    margin-left: 0; 
 
} 
 

 
.box-hidden-info p { 
 
    font-size: 72%; 
 
    width: 200px; 
 
    margin: 0 auto; 
 
    padding: 5px; 
 
} 
 

 
.box h1 { 
 
    font-weight: 100; 
 
    text-transform: uppercase; 
 
    font-size: 120%; 
 
    padding: 10px 0 0 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box" id="mouseenter"> 
 
    <div class="box-heading"> 
 
    <h1>Mouseenter</h1> 
 
    </div> 
 
    <div class="box-hidden-info"> 
 
    <p>Test text test text</p> 
 
    </div> 
 
</div> 
 

 
<div class="box" id="click"> 
 
    <div class="box-heading"> 
 
    <h1>click</h1> 
 
    </div> 
 
    <div class="box-hidden-info"> 
 
    <p>Test text test text</p> 
 
    </div> 
 
</div>