I have a search button on my website, i have a function that wil animate my input field when clicking by moving it to the right. And if i click out of it then it wil close.
This works only after like 2 times open/close it is broken and won't animate anymorge. I added a console.log(); so i can see what its doing.
Here is my function.
function setupSearchButton()
{
j(".icon").click(function() {
var icon = j(this),
input = icon.parent().find("#search"),
submit = icon.parent().find(".submit"),
is_submit_clicked = false;
j(".searchform").animate({ "margin-left": "+=180px", "display": "block !important" }, "slow", function(){
console.log("Move the searchbar to the right 180px;");
});
// Animate the input field
input.animate({
"width": "165px",
"opacity": 1
}, 300, function() {
input.focus();
});
submit.mousedown(function() {
is_submit_clicked = true;
});
// Now, we need to hide the icon too
icon.fadeOut(300);
input.blur(function() {
if(!input.val() && !is_submit_clicked) {
input.animate({
"width": "0",
"padding": "0",
"opacity": 0
}, 200);
// Get the icon back
icon.fadeIn(200);
j(".searchform").animate({ "margin-left": "-=180px", "display": "block !important" }, "slow", function(){
console.log("Move the searchbar back by adding a negative -180px to the left.");
});
};
});
});
}
Also i'm using "noconflict".
So what i'm doing wrong here ?.
Thx
Check if the field is animated. if it is animated then return otherwise apply animation. Try with below code sample inside click function.
input = icon.parent().find("#search");
if(input.is(":animated")){
// return if Animate applied.
return;
}
else
{
// Animate the input field
input.animate({
"width": "165px",
"opacity": 1
}, 300, function() {
input.focus();
});
}
Related
My Script Snippet:
$(document).on('click', function(e) {
if ($(e.target).closest('.input-actions.Actions').length) {
var CurrentWidth = $(e.target).width() + 'px',
OpenWidth = '308px';
if ($(e.target).is('.dropdown-toggle')) {
$(e.target).animate({
width:OpenWidth
}, {
direction: 'right',
duration: 500,
});
setTimeout(function() {
$(e.target).parent().find('.dropdown-menu').slideDown({
height: '249px',
}, {
duration: 500,
});
}, 800);
}
}
});
Script Explanation:
On click of the link, the button changes with to match the drop down via animate then with the delay the drop down slides down.
What I'd Like To Achieve:
I'd like to add, in the most simplistic way, a toggle feature so that upon clicking again the reverse occurs animating the $(e.target) back to CurrentWidth and $(e.target).parent().find('.dropdown-menu') to slide back up and hide.
My code below works only once. I couldn't figure out why, please help.
i really really bad need it plz help me
my problem : first of all plz click on the frist button from the top
and then click on the second one now do this all again without
refreshing page now u see it dosent work like the first time
$(document).ready(function() {
$('#goLeft').on('click', function() {
if ($(".myWorks").css("opacity") == "0") {
$('.wrap').animate({
marginRight: '1045px'
}, "slow");
$('.about_me').toggleClass("Visibility_to_visible");
} else {
$('.myWorks').toggleClass("Visibility_to_Unvisible1");
$('.wrap').animate({
marginRight: '1045px'
}, "slow");
$('.about_me').toggleClass("Visibility_to_visible");
}
});
$('#goRight').on('click', function() {
if ($(".about_me").css("opacity") == "0") {
$('.wrap').animate({
marginRight: '20px'
}, "slow");
$('.myWorks').toggleClass("Visibility_to_visible1");
} else {
$('.about_me').toggleClass("Visibility_to_Unvisible");
$('.wrap').animate({
marginRight: '20px'
}, "slow");
$('.myWorks').toggleClass("Visibility_to_visible1");
}
});
});
and this is my web page : https://jsfiddle.net/nn8b8w3e/
I can't reproduce what you're describing:
first of all plz click on the frist button from the top and then click
on the second one
After clicking the first button, the second button is no longer visible to click. Neither of the buttons on the new panel do anything.
However looking at your code, you're testing for which direction to slide, what to do, etc, based on opactiy of each panel:
if ($(".myWorks").css("opacity") == "0") {
But the code you've included never changes opacity on anything. You assign various classes, eg:
$('.about_me').toggleClass("Visibility_to_visible");
But the CSS you include does not show those classes. You either need to define those classes with an opacity, or instead specify opacity in the action, eg:
$('.about_me').toggleClass("Visibility_to_visible").css('opacity', 1);
Hellp friends i did it thanks for all of U this changes can fix this bug here's for U
just Put some .css("opacity",1) , .css("opacity",0) on it
$(document).ready(function(){
$('#goLeft').on('click', function(){
if($(".myWorks").css("opacity") == "0")
{
$('.wrap').animate({
marginRight : '1045px'
},"slow");
$('.about_me').toggleClass("Visibility_to_visible").css('opacity',1);
}
else {
$('.myWorks').toggleClass("Visibility_to_visible1").css('opacity',0);
$('.wrap').animate({
marginRight : '1045px'
},"slow");
$('.about_me').toggleClass("Visibility_to_visible").css('opacity',1);
}
});
////////////////////////////////////////////////////////////////////
$('#goRight').on('click', function(){
if($(".about_me").css("opacity") == "0")
{
$('.wrap').animate({
marginRight : '20px'
},"slow");
$('.myWorks').toggleClass("Visibility_to_visible1").css('opacity',1);
}
else {
$('.about_me').toggleClass("Visibility_to_visible").css('opacity',0);
$('.wrap').animate({
marginRight : '20px'
},"slow");
$('.myWorks').toggleClass("Visibility_to_visible1").css('opacity',1);
}
});
/////////////////////////////////////////////////////////////////
});
I'm using javascript to show and hide 3 divs on my site, but unless the menu is clicked again the current div just stays open. I am trying to find out how to make one div close when another is opening. There are three divs in total. Here is my current javascript:
<script type="text/javascript">
$(document).ready(function () {
$('#slide').click(function () {
var hidden = $('.hidden');
if (hidden.hasClass('visible')) {
hidden.animate({
"left": "-500px"
}, "slow").removeClass('visible');
} else {
hidden.animate({
"left": "0px"
}, "slow").addClass('visible');
}
});
});
</script>
Any insight would be greatly appreciated!
I would do it something like this instead:
$(document).ready(function () {
$('#slide').click(function () {
var hidden = $('.hidden').not('.visible');
var vis = $('.hidden.visible');
vis.animate({
"left": "-500px"
}, "slow").removeClass('visible');
hidden.animate({
"left": "0px"
}, "slow").addClass('visible');
});
});
I currently have a carousel slider which contains some text. When the user clicks the 'next' button the .carousel-text div sides up hiding the text, the carousel moves to the next slide then the .carousel-text on the next slide slides down to reveal the text.
This works fine some of the time but sometimes it will go wrong and the text will slide up and down before the carousel moves on. I'm assuming this is because the next button is clicked before the whole sequence has finished (the whole thing takes 2 seconds). Is there a way to make sure the whole thing is complete before it is called again?
jQuery("#arrow-right").click(function () {
jQuery('.carousel-text').animate({
marginTop: "-260px"
}, 500, function() {
jQuery('.carousel-inner').animate({
marginLeft: "-700px"
}, 1000, function() {
jQuery('.carousel-text').animate({
marginTop: "0px"
}, 500, function() {
// Animation complete.
});
});
});
}
EDIT: Just made a jsfiddle here: http://jsfiddle.net/UGE44/
Place a ".stop(true, true)" before you animate. This will stop the previous animations and allow the new ones to start all at the same time. Would look something like this:
jQuery('.carousel-text').stop(true, true).animate({
marginTop: "-260px"
}, 500, function() {
jQuery('.carousel-inner').stop(true, true).animate({
marginLeft: "-700px"
}, 1000, function() {
jQuery('.carousel-text').stop(true, true).animate({
marginTop: "0px"
}, 500, function() {
// Animation complete.
});
});
});
Your may want to play around with which animates you place them before, as it may not need to be in all three spots.
Set "animating" flag before animate and clear it when animation is done.
jQuery("#arrow-right").click(function () {
var $text = jQuery('.carousel-text');
if ($text.data('animating') !== true) {
$text.data('animating', true)
.animate({
marginTop: "-260px"
}, 500, function() {
jQuery('.carousel-inner').animate({
marginLeft: "-700px"
}, 1000, function() {
jQuery('.carousel-text').animate({
marginTop: "0px"
}, 500, function() {
$text.data('animating', false);
// Animation complete.
});
});
});
}
}
Here is my Code. Initially Div color is black I want it to be changed after div totally has been slided towards right but it changes instantly when i click go button. Solution please ...
$("#go").click(function () {
$("#subdiv").animate({ "left": "+=75%" }, 1500);
$('#subdiv').css("background-color", "#293955");
$("#subdiv").animate({ "left": "-=75%" }, 1500);
}
);
use a callback for the animation that manipulates the element only after the animation has finished :
$("#go").click(function () {
$("#subdiv").animate({ "left": "+=75%" }, 1500,function(){
$('#subdiv')
.css("background-color", "#293955")
.animate({ "left": "-=75%" }, 1500);
}
);
}