This question already has answers here:
jQuery click toggle animation
(2 answers)
Closed 5 years ago.
i'm trying to animate an element with css.
First this element is hidden. A javascript event will show it and i want it to be animated.
The expected animation is letter-spacing -2px to letter-spacing 3px
$('#btn').click(function() {
$('#wrapper').addClass('animate');
});
#wrapper {
display: none;
/* I dont want the wrapper to be visible before the event */
}
#wrapper .message {
display: none; /* the message is not visible before the event */
letter-spacing: -2px;
transition: all 3s;
}
#wrapper.animate .message {
display: block;
letter-spacing: 3px;
}
#wrapper.animate {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<div id="wrapper" class="col-sm-12 no-padding">
<div class="text-center font-size-20">
<span class="message">
Message to show and animate
</span>
</div>
</div>
<button id="btn">Click me to animate</button>
Thanks
I found the real issue:
When using a unique class to show AND change the property to animate, the browser will directly show the element with the new property (letter-spacing 3px).
To make it work, I can add a timeout.
I'm still waiting for a better solution if it exists
$('#btn').click(function() {
$('#wrapper').addClass('show');
window.setTimeout(function() {
$('.message').addClass('animate');
}, 500);
});
#wrapper {
display: none;
/* I dont want the wrapper to be visible before the event */
}
#wrapper .message {
display: none; /* the message is not visible before the event */
letter-spacing: -2px;
transition: all 3s;
}
#wrapper.show .message {
display: block;
}
#wrapper .message.animate {
letter-spacing: 3px;
}
#wrapper.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<div id="wrapper" class="col-sm-12 no-padding">
<div class="text-center font-size-20">
<span class="message">
Message to show and animate
</span>
</div>
</div>
<button id="btn">Click me to animate</button>
Have you tried to change the css value of display instead of add a class ?
$('#btn').click(function() {
$('#wrapper').css('display', 'block);
});
And look at this : https://www.w3schools.com/cssref/pr_class_visibility.asp
visibility property can help you.
Here you go with the solution https://jsfiddle.net/5h1dgfpu/
$('#btn').click(function() {
$('#wrapper').addClass('animate');
});
#wrapper .message {
display: block; /* the message is not visible before the event */
letter-spacing: -2px;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
#wrapper.animate .message {
display: block;
letter-spacing: 3px;
visibility: visible;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper" class="col-sm-12 no-padding">
<div class="text-center font-size-20">
<span class="message">
Message to show and animate
</span>
</div>
</div>
<button id="btn">Click me to animate</button>
You can move the item using margin in the css, and for delay, you can use setTimeOut function in javascript, like below
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper" class="col-sm-12 no-padding">
<div class="text-center font-size-20">
<span class="message">
Message to show and animate
</span>
</div>
</div>
<button id="btn">Click me to animate</button>
CSS
#wrapper .message {
display: none; /* the message is not visible before the event */
transition:all 300ms ease-in-out;
margin-left:0px;
}
#wrapper.animate .message {
display: block;
letter-spacing: 3px;
visibility: visible;
margin-left:30px;
}
JAVA-SCRIPT
$('#btn').click(function() {
$('#wrapper span').show();
setTimeout(function() {
$('#wrapper').addClass('animate');
}, 1000);
});
Here is a fiddle for you
$(document).ready(function(){
$("#click").click(function(){
$("#text").css("visibility","visible");
$("#text").animate({
opacity: '1'
});
});
});
#text{
font-family: monospace;
font-size: 25px;
display: block;
visibility: hidden;
opacity: 0.2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<p id="text"> Message to show and animate</p>
</div>
<button id="click">Click & Animate</button>
Related
I want to make link(.fm) appearing while hovering the image, but my code isn't working (when i hover to the link it starts to appear and dissapear fast).this is the code. I tried usind z-index but it didn't worked , also tried changing positions , but without succes. Any tips please.can you please help me by typing a working code or correcting mine?
.fm a{
position:absolute;
display: none;
background-color: #5D5D5D;
color:pink;
padding:10px;
}
.caine1 img:hover + .fm a{
display:block;
z-index: 1;
}
<div class="caine1">
<img src="1.png" width="400" height="250"></img>
<div class="fm">
Female
</div>
</div>
The code is working , but it have lags while hovering the .fm link
This is another example but using javascript.
This will help with your problem that link disappears so fast.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.wrapper {
width: 400px;
height: auto;
}
.fm {
position: absolute;
padding: 10px;
background-color: #5D5D5D;
}
a:link,
a:visited,
a:active {
text-decoration: none;
color: pink;
}
.caine1.fm {
display: block;
height: 250px;
width: 400px;
}
.link {
font-family: Verdana;
font-size: 16px;
color: crimson;
z-index: 1;
display: block;
width: 400px;
}
.hiddenLink {
display: none;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="myImage" class="caine1">
<img id="img" src="1.png" width="400" height="250"></img>
<div id="link" class="hiddenLink">This is my hidden link</div>
</div>
</div>
<script>
document.getElementById("myImage").addEventListener("mouseover", function() {
document.getElementById("link").className = "link";
});
document.getElementById("img").addEventListener("mouseleave", function() {
document.getElementById("link").className = "hiddenLink";
});
</script>
</body>
</html>
Your using display none, and there is no transition animation on this component. Display none is binary, meaning there no way to animate this. Instead, use this:
To control the speed of animation, change the 1s in the transition property.
To change what the animation looks like, change the width, height, font-size, and opacity properties in the :hover selector
.fm a{
position:absolute;
width: 0;
height: 0;
visibility: hidden;
opacity: 0;
background-color: #5D5D5D;
color:pink;
padding:10px;
transition: all 1s ease-out
}
.caine1 img:hover + .fm a{
display:block;
z-index: 1;
width: 4rem;
height: 1.5rem;
font-size: 1rem;
visibility: visible;
opacity: 1;
}
<div class="caine1">
<img src="1.png" width="400" height="250"></img>
<div class="fm">
Female
</div>
</div>
I am trying to make a toggle like menu for showing different pieces of information, however my attempt is not working.
What I am looking for is if the user clicks on any of the titles (A, B or C) the description will fadeIn. That is why I tried using the closest() method to get the description associated with the title. Then when the user clicks on a different title, for the current one to close and the other open.
Does anyone see what I am doing wrong?
$(".service-list-title").on("click", function(event) {
$(this).closest('.service-list-description').fadeIn(300).siblings().closest('.service-list-description').fadeOut(300);
});
.service-list-title {
display: block;
color: #333333;
font-size: 1.1rem;
letter-spacing: .1rem;
margin: 20px 0px;
padding: 0 10px 0 25px;
cursor: pointer;
transition: all .35s ease;
-webkit-transition: all .35s ease;
}
.service-list-description {
display: none;
color: #333333;
font-size: .9rem;
margin: 10px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="service-list">
<li class="service-list-title">A</li>
<p class="service-list-description">This is the content for A</p>
</div>
<div class="service-list">
<li class="service-list-title">B</li>
<p class="service-list-description">This is the content for B</p>
</div>
<div class="service-list">
<li class="service-list-title">C</li>
<p class="service-list-description">This is the content for C</p>
</div>
The issue with your code is that you're using closest(), which looks for parent elements, instead of next() or siblings() which searches for elements at the same level.
However you can make the logic much simpler by attaching the event handler to the .service-list element and using find() to get the required element to fadeToggle(). You can then select all the other .service-list-description elements and call fadeOut() to hide them. Try this:
$(".service-list").on("click", function(event) {
var $target = $(this).find('.service-list-description').fadeToggle(300);
$('.service-list-description').not($target).fadeOut(300);
});
.service-list-title {
display: block;
color: #333333;
font-size: 1.1rem;
letter-spacing: .1rem;
margin: 20px 0px;
padding: 0 10px 0 25px;
cursor: pointer;
transition: all .35s ease;
-webkit-transition: all .35s ease;
}
.service-list-description {
display: none;
color: #333333;
font-size: .9rem;
margin: 10px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="service-list">
<li class="service-list-title">A</li>
<p class="service-list-description">This is the content for A</p>
</div>
<div class="service-list">
<li class="service-list-title">B</li>
<p class="service-list-description">This is the content for B</p>
</div>
<div class="service-list">
<li class="service-list-title">C</li>
<p class="service-list-description">This is the content for C</p>
</div>
The function below should do what you ask for:
$(".service-list-title").on("click", function(event) {
$('.service-list-description').fadeOut(300); // Close any that's open
$(this).siblings('.service-list-description').fadeIn(300); // Open new
});
Fiddle: https://jsfiddle.net/beekvang/oro9ue3k/
I'm trying to do a fade in and fade out jquery. However, I'm having some issues.
I hide the div when the page loads, but when I hover over it to fade it in, it fades in for a second then disappears. I then have to hover out then hover back in.
My Jquery:
$(document).ready(function(){
$('#hidedsl6').hide();
$('#showdsl6').hover(function(){
$('#hidedsl6').fadeIn();
}, function(){
$('#hidedsl6').fadeOut();
});
$('#showfttn10').hover(function(){
});
$('#showfttn15').hover(function(){
});
$('#showfttn25').hover(function(){
});
$('#showfttn50').hover(function(){
});
});
My HTML:
<h3 class="DSLLocation" id="showdsl6">DSL 6</h3>
<button class="btn btnblue" id="hidedsl6" type="button">Order Now!</button>
Just add preventDefault to stop the back and forth fade
$(document).ready(function(){
$('#hidedsl6').hide();
$('#showdsl6').hover(function(){
$('#hidedsl6').fadeIn();
}, function(e){
e.preventDefault();
$('#hidedsl6').fadeOut();
});
$('#showfttn10').hover(function(){
});
$('#showfttn15').hover(function(){
});
$('#showfttn25').hover(function(){
});
$('#showfttn50').hover(function(){
});
});
Why use jQuery when it can be done with CSS
.products{
display:table;
table-layout:fixed;
width: 100%;
}
.option{
display: table-cell;
position: relative;
text-align: center;
padding: 24px;
background: #C0FFEE;
}
.option button{
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border: 0;
cursor: pointer;
background: #1CEA6E;
transition: 0.3s; -webkit-transition: 0.3s;
opacity: 0;
visibility: hidden;
}
.option:hover button{
opacity: 1;
visibility: visible;
}
<div class="products">
<div class="option">
<h3>DSL 6</h3>
<button>ORDER NOW!</button>
</div>
<div class="option">
<h3>DSL 30</h3>
<button>ORDER NOW!</button>
</div>
<div class="option">
<h3>SUPER DSL 50</h3>
<button>ORDER NOW!</button>
</div>
</div>
$(document).ready(function(){
$('#hidedsl6').hide();
$('#showdsl6').hover(function(){
$('#hidedsl6').fadeIn();});
});
OK. It won't take anybody long to work out that I am learning jQuery here and might have gone about this in THE most cack-handed way possible. That's why I'm here though.
I have been creating a "panel" based menu system that provides a number of different functions (menu, filter, search, basket and account). I have it 99% where I want to be. Indeed if you click on the menu icon (as an example) you will see the exact effect. Click it again and everything is perfect.
My problem comes when the user clicks on another icon with their initial "panel" open. Now you can see the gaps in my knowledge.
Please note the effect is on a different div for the panel and on the same div each time (main). Naturally it would be best if either:
a) when clicking on a new icon without closing a panel the jQuery closes the previous panel, removes the close-btn, slides back the main and then opens fires the new panel.
or
b) it closes the previous panel, removes the close-btn but keeps the main open (I think this is over complicating).
HTML
<div id="mainpanel">
<div class="menunav">
<div class="toggle menu-btn"></div>
<div class="toggle filter-btn"></div>
<div class="toggle search-btn"></div>
<div class="toggle basket-btn"></div>
<div class="toggle account-btn"></div>
</div>
</div>
<div class="togglepanel mainmenu">
menu here
</div>
<div class="togglepanel filter">
filter here
</div>
<div class="togglepanel search">
search here
</div>
<div class="togglepanel basket">
basket here
</div>
<div class="togglepanel account">
account here
</div>
<main>
content will be here
</main>
CSS
#mainpanel {
position: fixed;
display: table;
top: 0;
left: 0;
width: 125px;
height: 100%;
background: #206ba4;
vertical-align: middle;
z-index: 9999;}
main {
position: relative;
top: 0;
margin-left: 125px;
transform: translateX(0);
transform: translateY(0);
transition: transform .5s;}
.move {
transform: translateX(300px) !important;}
.menunav {
display: table-cell;
color: #fff;
z-index: 1001;
margin: 20px 0 0;
text-align: center;
vertical-align: middle;}
.menunav div {
display: block;
width: 100%;
margin: 0 0 30px;
text-align: center;}
.menu-btn:after, .filter-btn:after, .search-btn:after, .basket-btn:after, .account-btn:after, .close-btn:after {
font-family: FontAwesome;
content: "menu";
font-size: 1.8em;
font-weight: 200;
color: #fff;
display: block;
height: 1em;
width: 1em;
margin: 0 0 0 30%;
cursor: pointer;}
.filter-btn:after {
content: "filter";}
.search-btn:after {
content: "search";}
.basket-btn:after {
content: "basket";}
.account-btn:after {
content: "account";}
.close-btn:after {
content: "close";}
.mainmenu, .filter, .search, .basket, .account {
position: fixed;
width: 300px;
top: 0;
left: 125px;
height: 100%;
background: #54a4de;
transform: translateX(-100%);
transition: transform .5s;
z-index: -1;}
.expand {
transform: translateX(0px);}
jQuery
jQuery(function($){
$('.menu-btn').click(function(){
$('.mainmenu').toggleClass('expand')
$('main').toggleClass('move')
$('.menu-btn').toggleClass('close-btn')
})
})
jQuery(function($){
$( '.filter-btn' ).click(function(){
$('.filter').toggleClass('expand')
$('main').toggleClass('move')
$('.filter-btn').toggleClass('close-btn')
})
})
jQuery(function($){
$( '.search-btn' ).click(function(){
$('.search').toggleClass('expand')
$('main').toggleClass('move')
$('.search-btn').toggleClass('close-btn')
})
})
jQuery(function($){
$( '.basket-btn' ).click(function(){
$('.basket').toggleClass('expand')
$('main').toggleClass('move')
$('.basket-btn').toggleClass('close-btn')
})
})
jQuery(function($){
$( '.account-btn' ).click(function(){
$('.account').toggleClass('expand')
$('main').toggleClass('move')
$('.account-btn').toggleClass('close-btn')
})
})
Here is the jsfiddle
Many thanks, in advance, for any pointers....my head hurts!
DEMO HERE
Many redundant code in your attempt, but still a good attempt to achieve this. So below are my suggestions to achieve this.
Tips:
Do not include multiple jQuery(function as this is equivalent to $(document).ready function and its good if you have only one per
js file
Write a single common event to all the buttons and differentiate based on $(this) for each click that happens
Add an extra data-* attribute to your .toggle element, say here data-target, to target its corresponding panel-body
So below are some changes I made to your code..
HTML
<div class="menunav">
<!--data-target to each of its corresponding body class-->
<div class="toggle menu-btn" data-target=".mainmenu"></div>
<div class="toggle filter-btn" data-target=".filter"></div>
<div class="toggle search-btn" data-target=".search"></div>
<div class="toggle basket-btn" data-target=".basket"></div>
<div class="toggle account-btn" data-target=".account"></div>
</div>
JS
jQuery(function($){
//click event to one common class i.e toggle
$('.toggle').click(function(){
var target=$(this).data('target'); //get the clicked element's target property
$('.togglepanel').not($(target)).removeClass('expand');
//remove class from all the togglepanel elements except the current element's target
$('.toggle').removeClass('close-btn');
//general action in any scenario to remove close-btn
if($(target).hasClass('expand'))
{
//if target has expand class then remove it and do necessary changes
$(target).removeClass('expand')
$('main').removeClass('move')
$(this).removeClass('close-btn')
}
else
{
//else add necessary classes
$(target).addClass('expand')
$('main').addClass('move')
$(this).addClass('close-btn')
}
})
})
jQuery(function($){
$(document).on('click', '.toggle', function (){
// to close all open contents
$('.togglepanel').removeClass('expand');
$('main').removeClass('move');
var target = $(this).data("target");
if( $(this).hasClass('close-btn') ){
$('.toggle').toggleClass('close-btn', false);
$('main').toggleClass('move', false)
$(target).toggleClass('expand', false);
}else{
$('.toggle').toggleClass('close-btn', false);
$(this).toggleClass('close-btn', true);
$('main').toggleClass('move', true)
$(target).toggleClass('expand', true);
}
});
})
#mainpanel {
position: fixed;
display: table;
top: 0;
left: 0;
width: 125px;
height: 100%;
background: #206ba4;
vertical-align: middle;
z-index: 9999;
}
main {
position: relative;
top: 0;
margin-left: 125px;
transform: translateX(0);
transform: translateY(0);
transition: transform .5s;
}
.move {
transform: translateX(300px) !important;
}
.menunav {
display: table-cell;
color: #fff;
z-index: 1001;
margin: 20px 0 0;
text-align: center;
vertical-align: middle;
}
.menunav div {
display: block;
width: 100%;
margin: 0 0 30px;
text-align: center;
}
.menu-btn:after, .filter-btn:after, .search-btn:after, .basket-btn:after, .account-btn:after, .close-btn:after {
font-family: FontAwesome;
content: "menu";
font-size: 1.8em;
font-weight: 200;
color: #fff;
display: block;
height: 1em;
width: 1em;
margin: 0 0 0 30%;
cursor: pointer;
}
.filter-btn:after {
content: "filter";
}
.search-btn:after {
content: "search";
}
.basket-btn:after {
content: "basket";
}
.account-btn:after {
content: "account";
}
.close-btn:after {
content: "close";
}
}
.close-btn:after {
content: "\f00d";
}
.mainmenu, .filter, .search, .basket, .account {
position: fixed;
width: 300px;
top: 0;
left: 125px;
height: 100%;
background: #54a4de;
transform: translateX(-100%);
transition: transform .5s;
z-index: -1;
}
.expand {
transform: translateX(0px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainpanel">
<div class="menunav">
<div class="toggle menu-btn" data-target=".mainmenu"></div>
<div class="toggle filter-btn" data-target=".filter"></div>
<div class="toggle search-btn" data-target=".search"></div>
<div class="toggle basket-btn" data-target=".basket"></div>
<div class="toggle account-btn" data-target=".account"></div>
</div>
</div>
<div class="togglepanel mainmenu">
menu here
</div>
<div class="togglepanel filter">
filter here
</div>
<div class="togglepanel search">
search here
</div>
<div class="togglepanel basket">
basket here
</div>
<div class="togglepanel account">
account here
</div>
<main>
content will be here
</main>
You are actually doing a lot of codes which can be converted to a single line.
Instead of adding a click event on each buttons, try something like this:
First, add a data-target attribute to your buttons, something like:
<div class="toggle menu-btn" data-target=".mainmenu"></div>
<div class="toggle filter-btn" data-target=".filter"></div>
<div class="toggle search-btn" data-target=".search"></div>
<div class="toggle basket-btn" data-target=".basket"></div>
<div class="toggle account-btn" data-target=".account"></div>
And on your jQuery:
jQuery(function($){
$(document).on('click', '.toggle', function (){
// to close all open contents
$('.togglepanel').removeClass('expand');
$('main').removeClass('move');
var target = $(this).data("target");
if( $(this).hasClass('close-btn') ){
$('.toggle').toggleClass('close-btn', false);
$('main').toggleClass('move', false)
$(target).toggleClass('expand', false);
}else{
$('.toggle').toggleClass('close-btn', false);
$(this).toggleClass('close-btn', true);
$('main').toggleClass('move', true)
$(target).toggleClass('expand', true);
}
});
});
I am working on an effect here, I will post the code as well, but here is the basic premise. I have a div containing 2 divs and one hidden div called test. When I click the containing div I want the hidden div (which is called "test") to animate only for the containing div I clicked. Right now it is opening on every single div because of how I have the code written, I am thinking I have to use "this" in order to get it to open correctly the way I want it, but I am not sure how to use it in this instance
TLDR: I want to toggle class .open on the div .test when I click the div .workImg (or workBlock), currently it is opening on every .workImg, I want it to only open on the one I click. I am very stumped, I think I need to use $(this) in here somewhere to target just the one I am clicking but cannot figure out how to apply that since all of my class names are the same...
HTML:
<div class="workCont">
<div class="workBlock">
<div class="workImg">
<div class="test"></div>
<img src="/assets/images/piece1.jpg" />
</div>
<div class="workName">Project</div>
</div>
<div class="workBlock">
<div class="workImg">
<div class="test"></div>
<img src="/assets/images/piece1.jpg" />
</div>
<div class="workName">Project</div>
</div>
<div class="workBlock break">
<div class="workImg">
<div class="test"></div>
<img src="/assets/images/piece1.jpg" />
</div>
<div class="workName">Project</div>
</div>
</div>
CSS:
.workCont {
width:1024px;
margin: $center;
overflow:hidden;
.workBlock {
float:left;
margin-left:17px;
&:nth-child(3n+1) {
margin-left:0;
}
&:nth-child(1n+1) {
margin-top:33px;
}
.workImg {
background:#151515;
width:330px;
height:201px;
display:inline-block;
position: relative;
}
.test {
position: absolute;
z-index:100;
width: 0px;
height: 0px;
-webkit-transition-duration: 1s;
-webkit-transition-property: all;
-webkit-transition-timing-function: ease-in-out;
text-align: center;
background: white;
color: white;
font-family: sans-serif; /* Just 'cos */
}
.test.open {
transform: scale(50, 50);
top: 0px;
left: 0px;
width: 1000px;
height: 1000px;
clear:both;
}
.workName {
text-align:center;
margin-top:17px;
}
}
}
jQuery:
$(document).ready(function(){
$(".workImg").click(function() {
$(".test").toggleClass("open");
});
});
use $(this)
$(document).ready(function(){
$(".workImg").click(function() {
$(this).find(".test").toggleClass("open");
});
});