$(".links").click(function(){
$('.slider').stop(true,false).animate({ right: "0" }, 800, 'easeOutQuint');
}, function() {
$(".slider").stop(true,false).animate({ right: "-200" }, 800, 'easeInQuint');
}, 1000);
I am building a little slider on my website. The slider position is right: -200. It slides to position right: 0 I want to animate it back to position right: -200 after clicking anywhere else on the page.
I tried all the ways which failed. toggle(slide) works good but doesn't looks good.
http://jsfiddle.net/aofg5v78/
Putting your code through the JavaScript beautifier (it's always good to do it to your code that you post to make it easier to understand) gives this:
$(function () {
$(".links")
.click(function () {
$('.slider')
.stop(true, false)
.animate({
right: "0"
}, 800, 'easeOutQuint');
},
function () {
$(".slider")
.stop(true, false)
.animate({
right: "-200"
}, 800, 'easeInQuint');
}, 1000);
});
You're trying to pass two handlers to .click() and something that looks like a timeout or duration (1000). Try something like this:
$(function () {
var toggle;
$(".links")
.click(function () {
toggle = !toggle;
if (toggle) {
$('.slider')
.stop(true, false)
.animate({
right: "0"
}, 800, 'easeOutQuint');
}
else {
$(".slider")
.stop(true, false)
.animate({
right: "-200"
}, 800, 'easeInQuint');
}
});
});
Update: To make it slide when you click anywhere on the page it's slightly more complicated:
$(function () {
var toggle;
$(document).click(function () {
if (toggle) {
toggle = !toggle;
$(".slider")
.stop(true, false)
.animate({
right: "-200"
}, 800, 'easeInQuint');
}
});
$(".links")
.click(function (e) {
e.stopPropagation();
toggle = !toggle;
if (toggle) {
$('.slider')
.stop(true, false)
.animate({
right: "0"
}, 800, 'easeOutQuint');
}
else {
$(".slider")
.stop(true, false)
.animate({
right: "-200"
}, 800, 'easeInQuint');
}
});
$(".slider")
.click(function (e) {
e.stopPropagation();
});
});
This part:
$(".slider")
.click(function (e) {
e.stopPropagation();
});
is there to not hide the slider when you click on the slider (and not somewhere else on the page, outside of the slider) but if that's not what you want then you can remove it.
(The code could be refactored to remove duplication and to avoid running the selectors multiple times but it serves the purpose of this example. Also, you can't have more than one such slider on a page right now because all will slide at the same time but I guess that's ok.)
See DEMO.
It would be simpler for older jQuery versions with the toggle method but unfortunately it was deprecated in version 1.8 and removed in version 1.9.
(By the way, the easing functions that you are using are not available in plain jQuery by default. They are available if you're using jQuery UI but if you're not then you have to add them before you can use them. Just something to keep in mind to avoid the unhelpful "undefined is not a function" exception.)
Heres a different take:
DEMO
css
.slider {
position: absolute;
top: 200px;
height: 200px;
width: 200px;
background: #000;
/* relevant */
transform: translateX(-200px);
transition: transform 400ms ease-in-out;
}
.slider.shown {
transform: translateX(0);
}
jquery js
$(document).ready(function(){
var $slider = $('.slider').addClass('shown');
$(document).on('click', '*:not(.slider)', function(e) {
//// as described in question in on load, out on click
// $slider.removeClass('shown');
// to slide in/out on click:
$slider.toggleClass('shown');
})
// seperate button, dedicated to fn
$('.toggleSlider').on('click', function() {
$slider.toggleClass('shown');
});
});
demo HTML
<body>
<div class='slider'>such div</div>
<button class='toggleSlider'>such div</button>
</body>
You can do it from two event attachment... and check closest() element have .spider or not and make toggle from animation() function, see below code
$(function() {
$(".slider").click(function() {
$('.slider').stop(true, false).animate({
right: "0"
}, 800, 'easeOutQuint');
});
$(document).on('click', function(e) {
if (!$(e.target).closest('.slider').length) {
$(".slider").stop(true, false).animate({
right: "-370"
}, 800, 'easeInQuint');
}
});
});
.slider {
position: fixed;
right: -370px;
top: 120px;
z-index: 99997;
width: 400px;
height: 300px;
background: red;
}
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div class="slider"></div>
Related
https://jsfiddle.net/gmz73oew/
So I'm trying to make it so that on the click of the button the height of the div grows. I've got this animation working by itself smoothly but I'm having issues when I try to make it happen via clicking the button.
$(document).ready(function() {
$("#button1").click(function(){
$("#maBlock").animate({
height: "950px",
top: "0px",
}, 2000 );
});
}
Help is appreciated.
You need to add a bracket and a semicolon to the end, to close the ones that $(document).ready(function() { opened:
$(document).ready(function () {
$("#button1").click(function () {
$("#maBlock").animate({
height: "950px",
top: "0px",
}, 2000);
});
}); //here you need the ');'
There is a syntax error in your code
replace your js code below snippet of code
click here
$(document).ready(function() {
$("#button").click(function(){
$("#maBlock").animate({
height: "950px",
top: "0px",
}, 2000 );
});
});
You forgot bracket and semicolon in the last row
$(document).ready(function() {
alert('ciao');
$("#button1").click(function(){
$("#maBlock").animate({
height: "950px",
top: "0px",
}, 2000 );
});
});//<----- this
I have some code that shows a div with a message in it when button is clicked. I want the div to disappear after a few seconds.
I have tried to achieve this adding $(this).delay().hide(500); in the .notify function but it doesn't work.
$.fn.notify = function(settings_overwrite) {
settings = {
placement: "top",
default_class: ".message",
delay: 0
};
$.extend(settings, settings_overwrite);
$(settings.default_class).each(function() { $(this).hide(); });
$(this).show().css(settings.placement, -$(this).outerHeight());
obj = $(this);
if (settings.placement == "bottom") {
setTimeout(function() { obj.animate({ bottom: "0" }, 500) }, settings.delay);
}
else {
setTimeout(function() { obj.animate({ top: "0" }, 500) }, settings.delay);
}
}
/** begin notification alerts
-------------------------------------**/
$(document).ready(function($) {
$('.message').on('click', (function() {
$(this).fadeTo('slow', 0, function() {
$(this).slideUp("slow", function() {
$(this).remove();
});
});
}));
});
$(document).ready(function() {
if (document.location.href.indexOf('#notify_success') > -1) {
$("#notify_autopop").notify({
delay: 500
});
}
});
You can use setTimeout function
You have to store the divobj in a variable and then use it inside the setTimeout function
$('div').click(function(){
//show the message
var divObj = $(this);
setTimeout(function(){
divObj.hide();
},3000);
});
check the fiddle link
https://jsfiddle.net/uujf8hmq/
You can write your code to hide the div in the 2nd argument of show() methos which is a complete callback. You need to hide() the element in this callback. You can put necessary timeout before hide().
You can use CSS3 animation/transition instead of jquery's animation. and you can use setTimeout to fade message after sometime.
See the below code
JS
$.fn.notify = function(message, settings_overwrite){
var settings = {
placement:"top-left",
delay: 2000
};
$.extend(settings, settings_overwrite);
var $this = $(this);
$this.removeClass('bottom-left top-left');
$this.text(message);
$this.addClass(settings.placement + ' display');
$this.on('click', function(){
$this.removeClass('display');
});
setTimeout(function(){
$this.removeClass('display');
}, settings.delay);
}
$(document).ready(function ($) {
$('body').on('click', '.create-message', function(){
$('.message').notify($('#msg').val(), {
placement: $('#pos').val()
});
});
});
HTML
Position :
<select id="pos">
<option value="top-left" selected>Top Left</option>
<option value="bottom-left">Bottom Left</option>
</select>
<br/>
<textarea id="msg"></textarea>
<br/>
<button class="create-message">show message</button>
<div class="message"></div>
CSS
.message{
position: fixed;
width: 100px;
height: 50px;
background: green;
color: white;
padding: 3px;
border-radius: 3px;
opacity: 0;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
.message.display {
opacity: 1;
}
.message.top-left {
top: 10px;
right: 10px;
}
.message.bottom-left {
bottom: 10px;
right: 10px;
}
jsfiddle link - http://jsfiddle.net/jigardafda/ac5wyfo9/3/
Usually we do not use $(document).ready(function() {....}(); twice on a single page.
Try writing code to hide the div inside the same $(document).ready(function() {.....}() after the .show() function.
You can use either .hide() or setTimeout() functions to hide the div.
I need to link jQuery toggle and animate functions together. When i click on the box, its size should change. My codes js fiddles snip is here. Why doesn't it work? It disappears on startup.
JS Fiddle snip
$(document).ready(function() {
$('.adiv').toggle(
function(){
$(this).animate({
width: "150",
height: "150",
}, 1000);
},
function(){
$(this).animate({
width: "77",
height: "77",
}, 1000);
});
});
Toggle will hide/show you element so because your element is visible at initial load the first time your toggle function is called it will animate but then the toggle will set a display none on the element causing it to hide. You should not use the toggle function for this.
You should use something like this:
$(document).ready(function() {
var big = false;
$('.adiv').on('click', function(){
if( big ) {
$(this).animate({
width: "77",
height: "77",
}, 1000);
} else {
$(this).animate({
width: "150",
height: "150",
}, 1000);
}
big = !big;
});
});
Here is a working example: http://jsfiddle.net/x7f34vr5/1/
You need to assign a click handler, or it will just run right away. eg.
$('.adiv').click( function () {
// Do stuff here
});
Toggle and animate don't really go together - here's a different way of doing it:
$(document).ready(function () {
$('.adiv').click( function () {
var newSize = $(this).width() > 77 ? 77 : 150;
$(this).animate({
width: newSize,
height: newSize,
}, 1000);
});
});
Fiddle here.
I am using the following functions to grow the text box and display the submit button on focus and shrink and hide the button on blur.
But the button shows and hides before the animation is complete.
I am looking to create a neat slide down and slide up animation.
$('#venue-write-review').focus(function() {
$(this).animate({ height: '96px' }, 500);
$('#submit-review').show();
});
$('#venue-write-review').blur(function() {
$(this).animate({ height: '48px' }, 500);
$('#submit-review').hide();
});
You can specify a callback to the animate function to be executed once the animation is done.
$('#venue-write-review')
.focus(function() {
$(this).animate({ height: '96px' }, 500, function () {
$('#submit-review').show();
});
})
.blur(function() {
$(this).animate({ height: '48px' }, 500, function () {
$('#submit-review').hide();
});
});
This is all you need And don't forget to use .stop()!
$('#venue-write-review').on('focus blur',function(e){
$(this).stop().animate({ height: e.type[0]=="f"?96:48 }, 500, function(){
$('#submit-review').toggle();
});
});
e.type[0]=="f" ij just to check in a Conditional Operator (?:) if the passed event's first [0] character is f (focus; else logically it's blur)
Read the jQuery docs about the methods: .on(), .toggle(), stop() .animate() callback and on the MDN website read about Conditional operator
Also in jQuery if you don't need to animate by % or some other measure, you don't need to specify 'px' cause it's default.
You can use complete callback. Check the docs (under options section):
A function to call once the animation is complete.
Like this:
$('#venue-write-review').focus(function() {
$(this).animate({
height: '96px'
},
{
duration: 500,
complete: function() {
$('#submit-review').show();
}
}
});
});
$('#venue-write-review').blur(function() {
$(this).animate({
height: '48px'
},
{
duration: 500,
complete: function() {
$('#submit-review').hide();
}
}
});
});
Alright, I have added two div's in my web page and added below jQuery, and every thing looks fine, when i move my mouse on to the tile it expands, but when the first div expands, the second div position changes. i want to freeze the second div and the expanded tile should be on top of the second div. please suggest.
$(document).ready(function () {
$("#div1").css("background", "Red");
$("#div2").css("background", "Blue");
$("#div1").mouseenter(function () {
$(this).animate({
height: "+=30px",
width: "+=30px"
}, 50);
});
$("#div1").mouseleave(function () {
$(this).animate({
height: "-=30px",
width: "-=30px"
}, 50);
});
$("#div2").mouseenter(function () {
$(this).animate({
height: "+=30px",
width: "+=30px"
}, 50);
});
$("#div2").mouseleave(function () {
$(this).animate({
height: "-=30px",
width: "-=30px"
}, 50);
});
});