I can carry this task by using .toggle() in version 1.8 of jquery
but am using /jquery/3.2.1/ on my site and the .toggle() is not working properly
in one of my page am using this in my first section
$(document).ready(function(){
$("#slideBtn").click( function(){
$(".slide-div").animate({left : '0'},"slow");
$(".slide-div").css({"top": "0","z-index": "9"});
$("p").animate({fontSize: '100px'},2000);
$("#slideBtn").fadeOut("slow");
});
$(".closedBtn").click( function(){
$(".slide-div").animate({left:'-820px'},"slow");
$(".slide-div").css({"top": "0","z-index": "9"});
$("p").animate({fontSize: '14px'}, "slow");
$("#slideBtn").fadeIn("slow");
});
});
it works fine but when i have to do the same task by clicking on the same button as it is in my bottom section by clicking it first time it works fine but if i click multiple time it wont work fine so i have issues with this code i need help with this code thank's
Here is the code
$(document).ready(function(){
$("#button").click(function(){
$(".new-box").animate({left : '0'},"slow");
});
$("#button").click(function(){
var left = $(".new-box").css('left');
if(left == '-820'){
$(".new-box").animate({left : '0'},"slow" );
}
else {$("#button").on("click",function(){ $(".new-box").animate({left : '-820px'},"slow");});}
});
});
Here is the example
$(document).ready(function() {
$("#slideBtn").click(function() {
$(".slide-div").animate({
left: '0'
}, "slow");
$(".slide-div").css({
"top": "0",
"z-index": "9"
});
$("p").animate({
fontSize: '100px'
}, 2000);
$("#slideBtn").fadeOut("slow");
});
$(".closedBtn").click(function() {
$(".slide-div").animate({
left: '-820px'
}, "slow");
$(".slide-div").css({
"top": "0",
"z-index": "9"
});
$("p").animate({
fontSize: '14px'
}, "slow");
$("#slideBtn").fadeIn("slow");
});
});
$(document).ready(function() {
$("#button").click(function() {
$(".new-box").animate({
left: '0'
}, "slow");
});
$("#button").click(function() {
var left = $(".new-box").css('left');
if (left == '-820') {
$(".new-box").animate({
left: '0'
}, "slow");
} else {
$("#button").on("click", function() {
$(".new-box").animate({
left: '-820px'
}, "slow");
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="float:left;width:1020px;">
<div class="main" style="width:800px;height: 500px;background-color: #f5f5f5;position:relative;">
<button id="slideBtn">Play</button>
<div class="slide-div" style="width:800px;height: 500px;background-color: aqua;position:absolute;left:-820px;"><button class="closedBtn" style="float:right;border:1px solid green;border-radius:50%;padding:10px;position:relative;top:0;right:0; ">X</button>
<p style="width:100%;">Hello</p>
</div>
</div>
<div class="showdiv" style="width:800px;height: 500px;background-color: red;position:relative;">
<button id="button">shw</button>
<div class="new-box" style="width:800px;height: 500px;background-color: #f98463;position:absolute;left:-820px;"><button class="closedBtn" style="float:right;border:1px solid green;border-radius:50%;padding:10px;position:relative;top:0;right:0; "></div>
</div>
</div>
JSFiddle
If you used a debugger on the code, you'd see that left comes back from css with a units value on it (e.g., -810px, not -810). You're also hooking up a click handler within a click handler, which is almost never a good idea.
I wouldn't rely on the return value from css at all; instead, I'd use a flag class (and probably do the animation with CSS, but that's out of scope):
$(document).ready(function() {
$("#button").click(function() {
$(".new-box").animate({
left: '0'
}, "slow");
});
$("#button").click(function() {
var left = $(".new-box").css('left');
if ($(".new-box").hasClass('on-left')) {
$(".new-box").removeClass('on-left').animate({
left: '0'
}, "slow");
} else {
$(".new-box").addClass('on-left').animate({
left: '-820px'
}, "slow");
}
});
});
There I've added a class initially to the element, and then I use it as a flag for what to do when the click occurs.
Live copy:
$(document).ready(function() {
$("#slideBtn").click(function() {
$(".slide-div").animate({
left: '0'
}, "slow");
$(".slide-div").css({
"top": "0",
"z-index": "9"
});
$("p").animate({
fontSize: '100px'
}, 2000);
$("#slideBtn").fadeOut("slow");
});
$(".closedBtn").click(function() {
$(".slide-div").animate({
left: '-820px'
}, "slow");
$(".slide-div").css({
"top": "0",
"z-index": "9"
});
$("p").animate({
fontSize: '14px'
}, "slow");
$("#slideBtn").fadeIn("slow");
});
});
$(document).ready(function() {
$("#button").click(function() {
$(".new-box").animate({
left: '0'
}, "slow");
});
$("#button").click(function() {
var left = $(".new-box").css('left');
if ($(".new-box").hasClass('on-left')) {
$(".new-box").removeClass('on-left').animate({
left: '0'
}, "slow");
} else {
$(".new-box").addClass('on-left').animate({
left: '-820px'
}, "slow");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="float:left;width:1020px;">
<div class="main" style="width:800px;height: 500px;background-color: #f5f5f5;position:relative;">
<button id="slideBtn">Play</button>
<div class="slide-div" style="width:800px;height: 500px;background-color: aqua;position:absolute;left:-820px;"><button class="closedBtn" style="float:right;border:1px solid green;border-radius:50%;padding:10px;position:relative;top:0;right:0; ">X</button>
<p style="width:100%;">Hello</p>
</div>
</div>
<div class="showdiv" style="width:800px;height: 500px;background-color: red;position:relative;">
<button id="button">shw</button>
<div class="new-box on-left" style="width:800px;height: 500px;background-color: #f98463;position:absolute;left:-820px;"><button class="closedBtn" style="float:right;border:1px solid green;border-radius:50%;padding:10px;position:relative;top:0;right:0; "></div>
</div>
</div>
When you call $("selector").click(.. twice like you have, you're assigning two click handlers - so both run at the same time (both run on a single click).
You need to check the state within the click button, eg:
var isshown = false;
var isshown = true;
$("#btn").click(function() {
if (isshown) {
// do your animates here, simple hide/show as example
$("#content").hide();
} else {
$("#content").show();
}
isshown = !isshown;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='content'>content</div>
<button id='btn'>click</button>
There are many ways to check this, above is an example.
Related
How Do I Place jQuery Animated Object Inside A HTML Canvas or Div Tag?
I have image, which can be moved Right,Left,Up,Down with the click on the button.
Here is what I have worked on so far:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#moveleft').click(function() {
$('#textbox').animate({
'marginLeft' : "-=80px" //moves left
});
});
$('#moveright').click(function() {
$('#textbox').animate({
'marginLeft' : "+=80px" //moves right
});
});
$('#movedown').click(function() {
$('#textbox').animate({
'marginTop' : "+=80px" //moves down
});
});
$('#moveup').click(function() {
$('#textbox').animate({
'marginTop' : "-=80px" //moves up
});
});
});
</script>
<div style="border:1px solid #c3c3c3;>
<div style="padding:20px;">
<button id="moveleft">Move Left</button>
<button id="moveright">Move right</button>
<button id="movedown">Move Down</button>
<button id="moveup">Move Up</button></div>
<div id="textbox" style="position:absolute;padding:10px;width:300px;">
<img src="sample.gif">
</div>
<div>
You need to calculate the offset and limit you image in parent div.
Here is a example where image is limited for left border, extend similar logic for all borders:
$(document).ready(function() {
var parent = $("#parent");
var maxLimits = {
"left": parent.offset().left,
"right": parent.offset().left + 300,
"top": parent.offset().top,
"bottom": parent.offset().top + 100
}
$('#moveleft').click(function() {
if (maxLimits.left > $('img').offset().left - 80) {
$('img').animate({
'marginLeft': "=" + maxLimits.left + "px"
});
} else {
$('img').animate({
'marginLeft': "-=80px" //moves left
});
}
});
$('#moveright').click(function() {
$('img').animate({
'marginLeft': "+=80px" //moves right
});
});
$('#movedown').click(function() {
$('img').animate({
'marginTop': "+=80px" //moves down
});
});
$('#moveup').click(function() {
$('img').animate({
'marginTop': "-=80px" //moves up
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div style="border:1px solid #c3c3c3;>
<div style=" padding:20px; ">
<button id="moveleft">Move Left</button>
<button id="moveright">Move right</button>
<button id="movedown">Move Down</button>
<button id="moveup">Move Up</button></div>
<div id="parent" style="position:absolute;padding:10px;width:300px;height:100px ">
<img height=50px width=50px src="sample.gif ">
</div>
<div>
i have created image animation with 3 image in which , initially only 1 image displayed then after animation of 1st image complete then same with second at a time only two image i have to display and if 3rd image come then i have to hide first image , i want this type of animation for all 6 images but i am stuck after 4th image , help me to resolve this or suggest me any other js that can make my work done.many thanks.
here is my fiddle : js fiddle
Following is code :
HTML
<div style="float:left;position: relative;left: 300px" id="b">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/top_chart_track_number_one-128.png" class="image1">
</div>
<div style="float:left;position: relative;display: none;" id="b1">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/track_number_two_circle-128.png" class="image2">
</div>
<div style="float:left;position: relative;display: none;" id="b2">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/three_top_chart_track-128.png" class="image3">
</div>
<div style="float:left;position: relative;display: none;" id="b3">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/top_number_four_track_chart_circle-128.png" class="image3">
</div>
<div style="float:left;position: relative;display: none;" id="b4">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/top_five_chart_track_list-128.png" class="image3">
</div>
<div style="float:left;position: relative;display: none;" id="b5">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/number_six_circle_chart_list_track-128.png" class="image3">
</div>
JS
$(document).ready(function() {
$("#b").animate({left: "-=300"},2000);
$("#b").animate({left: "+=80"}, 1000);
var counter = 1;
setInterval(function()
{
++counter;
console.log(counter);
if(counter=='2')
{
}
else if(counter=='7')
{
$("#b").animate({left: "-=80"},1000);
}
else if(counter=='4')
{
$("#b1").fadeIn('slow');
$("#b1").animate({left: "+=300"},2000);
$("#b1").animate({left: "-=280"}, 1000);
}
else if(counter=='8')
{
console.log('enter');
$("#b2").fadeIn('slow');
$("#b2").animate({left: "+=300"},2000);
$("#b2").animate({left: "-=500"}, 1000);
}
else if(counter=='11')
{
console.log('enter');
$("#b").animate({left: "-=300"}, 1000);
$("#b1").animate({left: "-=260"}, 1000);
$("#b2").animate({left: "-=0"}, 1000);
//$("#b").hide('1000');
}
}, 1000); });
Seems like a pain to add all that animation code for each element, especially if you decide to add more in the future. How about having a recursive function like this:
$(document).ready(function () {
var $first = $('.number').first();
slider($first, true);
function slider($first, firstPass) {
var $second = $first.next();
var $third = $second.next();
if (firstPass) {
$first.fadeIn('slow');
$first.animate({ left: "0" }, 2000, function () {
$first.animate({ left: "80px" }, 1000, function () {
loop();
});
});
} else {
loop();
}
function loop() {
$second.css('left', '120px').fadeIn('slow');
$second.animate({ left: "400px" }, 2000, function () {
$first.delay(500).animate({ left: "0" }, 1000);
$second.animate({ left: "150px" }, 1000, function () {
// If there is no third element, we can stop here.
if ($third.length > 0) {
$third.css('left', '250px').fadeIn('slow');
$first.delay(2500).animate({ left: "-600px" }, 1000, function () {
$first.fadeOut();
});
$second.delay(3000).animate({ left: "-300px" }, 1000, function () {
$second.fadeOut();
});
$third.animate({ left: "550px" }, 2000, function () {
$third.animate({ left: "80px" }, 1000, function () {
// Start again and set the third element as the new first.
slider($third, false);
});
});
}
});
});
}
}
});
.number {
position: absolute;
display: none;
}
#b {
left: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="number" id="b">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/top_chart_track_number_one-128.png" class="image1">
</div>
<div class="number" id="b1">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/track_number_two_circle-128.png" class="image2">
</div>
<div class="number" id="b2">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/three_top_chart_track-128.png" class="image3">
</div>
<div class="number" id="b3">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/top_number_four_track_chart_circle-128.png" class="image3">
</div>
<div class="number" id="b4">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/top_five_chart_track_list-128.png" class="image3">
</div>
<div class="number" id="b5">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/number_six_circle_chart_list_track-128.png" class="image3">
</div>
I see that the code only handles first three circles (seconds 1-11).
Further animation is provided by adding cases for later seconds.
Here is the fiddle that adds one case to show you that circle "4" is indeed displayed. But I believe it is upto you to make the final solution of it.
relevant code section is:
else if (counter == '14') {
console.log('enter 14');
$("#b3").fadeIn('slow');
$("#b").animate({
left: "0"
}, 1000);
$("#b1").animate({
left: "30"
}, 1000);
$("#b2").animate({
left: "60"
}, 1000);
$("#b3").animate({
left: "200"
}, 1000);
//$("#b").hide('1000');
}
I would like to show img on mouseover event over a thumbnail with help of data-attr but only the first thumbnail is working.
DEMO http://jsfiddle.net/3gn0kj1k/
I have tried a lots of things but without the success therefore I am here.
JS code :
enter code here
var animIcon = $(".graph-icons img");
var dataAnim = $(".graph-anim .animation").data("anim");
animIcon.mouseenter(function () {
$(".graph-main-img").css({
"opacity": "0"
});
if ($(this).data("img") === dataAnim) {
console.log(dataAnim);
$('.graph-anim .animation[data-anim=' + dataAnim + ']').css({
"opacity": "1"
});
}
});
animIcon.mouseleave(function () {
$(".graph-main-img").css({
"opacity": "1"
});
$(".animation").css({
"opacity": "0"
});
});
From the .data documentation (with my own emphasis):
return the value at the named data store for the first element in the
set of matched elements.
A way to fix it would be to simply use $(this).data("img") (which you're already checking against):
var dataAnim = $(this).data("img")
$('.graph-anim .animation[data-anim=' + dataAnim + ']').css({
"opacity": "1"
});
Updated Fiddle
you can just get the attribute and display according to this . Try following code.here is updated fiddle fiddle
var attr=$(this).attr('data-img');
$('.animation[data-anim=' + attr + ']').css({
"opacity": "1"
});
var animIcon = $(".graph-icons img");
animIcon.mouseenter(function () {
$(".graph-main-img").css({
"opacity": "0"
});
var attr=$(this).attr('data-img');
$('.animation[data-anim=' + attr + ']').css({
"opacity": "1"
});
});
animIcon.mouseleave(function () {
$(".graph-main-img").css({
"opacity": "1"
});
$(".animation").css({
"opacity": "0"
});
});
li {
list-style: none;
}
.graph-icons img {
width: 70px;
display: inline-block;
float: left;
padding-right: 30px;
margin-bottom: 50px;
cursor: pointer;
}
.graph-icons:after {
clear: both;
content:"";
display: block;
}
.graph-main {
position: relative;
}
.graph-anim .animation {
position: absolute;
top: 0;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- ICONS -->
<div class="graph-icons">
<li>
<img src="https://upload.wikimedia.org/wikipedia/en/6/6f/KennyMcCormick.png" data-img="kenny">
</li>
<li>
<img src="http://static.giantbomb.com/uploads/scale_small/0/4810/1202378-stan1.jpg" data-img="stan">
</li>
<li>
<img src="https://em.wattpad.com/0bf45eee023c7403ca0cb15d127e6c8852a57d28/687474703a2f2f736f7574687061726b73747564696f732e6d74766e696d616765732e636f6d2f7368617265642f636861726163746572732f6b6964732f6b796c652d62726f666c6f76736b692e6a7067" data-img="kyle">
</li>
</div>
<!-- anim -->
<div class="graph-main">
<div class="graph-main-img">
<img src="http://2.images.southparkstudios.com/default/image.jpg?quality=0.8" alt="">
</div>
<div class="graph-anim">
<div class="animation" data-anim="kenny">
<img src="https://upload.wikimedia.org/wikipedia/en/6/6f/KennyMcCormick.png">
</div>
<div class="animation" data-anim="stan">
<img src="http://static.giantbomb.com/uploads/scale_small/0/4810/1202378-stan1.jpg">
</div>
<div class="animation" data-anim="kyle">
<img src="https://em.wattpad.com/0bf45eee023c7403ca0cb15d127e6c8852a57d28/687474703a2f2f736f7574687061726b73747564696f732e6d74766e696d616765732e636f6d2f7368617265642f636861726163746572732f6b6964732f6b796c652d62726f666c6f76736b692e6a7067">
</div>
</div>
</div>
Not sure if this approach would be ok for you, but I simplified your script to look like this:
var animIcon = $(".graph-icons img");
animIcon.mouseenter(function () {
$(".graph-main-img").css({
"opacity": "0"
});
var character = $(this).data("img");
$('.graph-anim .animation[data-anim=' + character + ']').css({
"opacity": "1"
});
});
animIcon.mouseleave(function () {
$(".graph-main-img").css({
"opacity": "1"
});
$(".animation").css({
"opacity": "0"
});
});
Consider the following piece of HTML:
<div id="outer">
<div id="inner">
<p id="content">
Some content
</p>
</div>
</div>
I can make #inner slide out to the right from the screen using the following jQuery:
$("#slide").animate(
{
'marginLeft':'100%'
},400,
function(){
$(this).slideUp('fast');
$(this).css("margin-right","100%");
$(this).css("margin-left","0");
}
);
However, how can I make that same element, with new content (from AJAX response), slide back in from the left?
I was thinking about resetting the margins (from margin-left:100% to margin-left:0; margin-right:100%) while it was out of view and then use an animation to slide it in from the left:
$("#slide").animate(
{
'marginRight':'0'
},400,
function(){
$(this).slideDown('fast');
}
);
This slides it back into view, but not from the left of the screen. Any ideas? I got the .slideUp() from a different StackExchange question but don't know why it's needed for a horizontal slide.
Simply reset the margin using .css() method:
$(function() {
$("#outer").click(function() {
$(this).animate({
'marginLeft': '100%',
'opacity': 0
}, 200, function() {
//==================================
//call synchronous ajax here or move this block
//to the ajax done callback function
//some ajax change
$(this).css({
"background": "blue"
}).text("came back with new content");
$(this).css({
'marginLeft': '-100%'
});
$(this).animate({
'marginLeft': '0',
'opacity': 1
}, 200);
//=================================
});
});
});
#outer {
width: 100px;
height: 100px;
display: block;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
<div id="inner">
<p id="content">Click Me</p>
</div>
</div>
Reset the margin using .css, check it out here: https://jsfiddle.net/gdjypc7w/2/
JS
function getSummary(id) {
$.ajax({
type: "GET",
url: 'Your URL',
data: "id=" + id,
success: function (data) {
// the data
$('#summary').html(data);
}
});
}
$("button").click(function () {
$("#inner").animate({
marginLeft: $("body").width()
}, 1000, function () {
//$("#content").text(getSummary(id); Use your id here to retrieve new data
$("#content").text("New content");
$("#inner").css("margin-left", "-100%");
$("#inner").animate({
marginLeft: "0px"
}, 1000);
});
});
I have this jquery sliding text animator. If you look at the example(http://blog.waiyanlin.net/2008/12/17/jquery-flying-text-with-fade-effect/), the active text that flies in disappears again after it has made its entrance. I would like each animated text to stay there after appearing and wait until all the text has appeared, then all text should disappear and restart again.(so basically instead of each text disappearing after flying in, it should stay visible only until the last text element has appeared, then restart all over)
JavaScript:
<script type="text/javascript">
$(document).ready(function() {
$('.container .flying-text').css({
opacity: 0
});
$('.container .active-text').animate({
opacity: 1,
marginLeft: "250px"
}, 4000);
var int = setInterval(changeText, 5000);
function changeText() {
var $activeText = $(".container .active-text");
var $nextText = $activeText.next();
if ($activeText.next().length == 0) $nextText = $('.container .flying-text:first');
$activeText.animate({
opacity: 0
}, 1000);
$activeText.animate({
marginLeft: "-100px"
});
$nextText.css({
opacity: 0
}).addClass('active-text').animate({
opacity: 1,
marginLeft: "250px"
}, 3000, function() {
$activeText.removeClass('active-text');
});
}
});
</script>
CSS
.container{
width:500px;
margin:0 auto;
color:#FFF;
overflow:hidden;
}
.flying-text{
margin-left:-100px;
color: #fff;
}
HTML
<div class="container">
<div class="flying-text active-text">I believe</div>
<div class="flying-text">I can</div>
<div class="flying-text">Fly</div>
</div>
Thank You for any help
You need to move the fade out code that runs each time.
function changeText() {
var $activeText = $(".container .active-text");
var $nextText = $activeText.next();
if ($activeText.next().length == 0) {
$nextText = $('.container .flying-text:first');
// To fade all out _ MOVED FROM OUTSIDE THIS IF
var $allText = $(".container div");
$allText .animate({
opacity: 0
}, 1000);
$allText .animate({
marginLeft: "-100px"
});
}
$nextText.css({
opacity: 0
}).addClass('active-text').animate({
opacity: 1,
marginLeft: "250px"
}, 3000, function() {
$activeText.removeClass('active-text');
});
}
Here is a jsfiddle to illustrate.
UPDATE
Based on some comments, I updated the fiddle to show how you could use jQuery UI effects.