$('#add_to_cart_btn').unbind().on('click', function() {
//var cart = $('.cart_r');
var imgtodrag = $('#bzoom').find('img').eq(0);
if (imgtodrag) {
var imgclone = imgtodrag.clone().offset({
top: imgtodrag.offset().top, left: imgtodrag.offset().left
}).css({
'opacity': '0.5', 'position': 'absolute', 'height': '150px', 'width': '150px', 'z-index': '100'
}).appendTo($('body')).animate({
'top': $('.cart_r').top + 10, 'left': $('.cart_r').offset().left + 10, 'width': 75, 'height': 75
}, 1000, 'easeInOutExpo');
setTimeout(function () {
//cart.effect('shake', { times: 2 }, 200);
}, 1500);
imgclone.animate({
'width': 0, 'height': 0
}, function () {
$(this).detach();
});
$("html, body").animate({ scrollTop: 10 }, 1000);
}
return false;
});
show this error TypeError: $(...).offset(...) is undefined all ready add jquery.min.js but not working on any browser . any one can help me . Thanks in Advance
Related
So I'm using this lightbox and I need to put Next and Previous buttons, but I don't know how. If someone can help me...
$(document).ready(function () {
$('.lightbox').click(function () {
// Get all following .box and .background until next .lightbox is met.
// So we can get the related contents.
var $targets = $(this).nextUntil('.lightbox', '.box, .background');
$targets.animate({
'opacity': '.50'
}, 500, 'linear')
$targets.filter('.box').animate({
'opacity': '1.00'
}, 500, 'linear');
$targets.css('display', 'block');
});
$('.close').click(function () {
$('.background, .box').animate({
'opacity': '0'
}, 500, 'linear', function () {
$('.background, .box').css('display', 'none');
});;
});
$('.background').click(function () {
$('.background, .box').animate({
'opacity': '0'
}, 500, 'linear', function () {
$('.background, .box').css('display', 'none');
});;
});
});
Here > https://jsfiddle.net/cuummyhx/
Hey I am having difficulty rewriting a code, but it is not working when clicking to show. How can I fix this issue. The code works opens up 500 then is suppose to work by click. But it does not work. Here is the code:
var timer;
$(".c_left").animate({ marginRight: "30px"}, "slow");
$(".c_right").animate({ marginRight: "215px"}, "slow", function () {
timer = setTimeout(function () {
$(".c_left").animate({ marginRight: "-155px"}, "slow");
$(".c_right").animate({ marginRight: "30px"}, "slow");
}, 500);
});
$(".icon-menu-2").click(function show() {
$(".c_left").show.animate({ width: 200, marginRight: 30, display: 'toggle'}, 'slow');
$(".c_right").show.animate({ marginRight:215, display:'toggle'}, 'slow', function () {
clearTimeout(timer);
});
}, function hide() {
$(".c_left").animate({ marginRight: -155, display: 'toggle'}, 'slow');
$(".c_right").animate({ marginRight:30, display:'toggle'}, 'slow');
});
http://jsfiddle.net/jL5hU/
How can I fix my code?
As bfvareto commented .show() is a function and you cannot call it with just .show
You had strange code here also: .click(function show() {. Not quite sure what you mean there, anyway try my code suggestion...
var timer; var open;
$(".c_left").animate({ marginRight: "30px"}, "slow");
$(".c_right").animate({ marginRight: "215px"}, "slow", function () {
timer = setTimeout(function () {
$(".c_left").animate({ marginRight: "-155px"}, "slow");
$(".c_right").animate({ marginRight: "30px"}, "slow");
open = false;
}, 500);
});
$(".icon-menu-2").click(function() {
if(open){
$(".c_left").animate({ marginRight: "-155px"}, "slow");
$(".c_right").animate({ marginRight: "30px"}, "slow");
} else {
$(".c_left").animate({ marginRight: "30px"}, "slow");
$(".c_right").animate({ marginRight: "215px"}, "slow");
}
open = !open;
});
Demo here
I am using some JavaScript and jQuery (with the easing plugin) to create a virtual tour; really just a long image that can pan left and right. I have found this which is perfect for the cause: http://jsfiddle.net/MvRdD/1/. Is there a way to add easing to the animation?
http://jsfiddle.net/ARTsinn/MvRdD/890/
$(document).ready(function() {
$.getScript("https://raw.github.com/danro/easing-js/master/easing.min.js");
var animateTime = 10,
offsetStep = 5,
scrollWrapper = $('#wrap');
//event handling for buttons "left", "right"
var aktiv;
$('.bttL, .bttR').mousedown(function(e) {
if (e.target.className === 'bttR') {
aktiv = window.setInterval(function() {
scrollWrapper.animate({
scrollLeft: '+=' + 20
}, {
duration: 600,
queue: false,
easing: 'easeOutCirc'
});
}, 10);
} else if (e.target.className === 'bttL') {
aktiv = window.setInterval(function() {
scrollWrapper.animate({
scrollLeft: '-=' + 20
}, {
duration: 1200,
queue: false,
easing: 'easeOutCirc'
});
}, 10);
}
}).mouseup(function() {
window.clearInterval(aktiv);
});
scrollWrapper.mousedown(function(event) {
$(this).data('down', true).data('x', event.clientX).data('scrollLeft', this.scrollLeft);
return false;
}).mouseup(function(event) {
$(this).data('down', false);
}).mousemove(function(event) {
if ($(this).data('down')) {
$(this).stop(false, true).animate({
scrollLeft: $(this).data('scrollLeft') + ($(this).data('x') - event.clientX) * 2
}, {
duration: 600,
queue: false,
easing: 'easeOutCirc'
});
}
}).mousewheel(function(event, delta) {
$(this).stop(false, true).animate({
scrollLeft: '-=' + delta * 60
}, {
duration: 400,
queue: false,
easing: 'easeOutCirc'
});
event.preventDefault();
}).css({
'overflow': 'hidden',
'cursor': '-moz-grab'
});
});
What would be a better way of writing this:
setTimeout(function() {
$('#clock').animate({
'marginTop': '-20px'
}, 'slow', $.bez(bezierEasing));
}, 100);
setTimeout(function() {
$('#submit').animate({
'top': '-5px'
}, 500, $.bez(bezierEasing));
}, 200);
setTimeout(function() {
$('#details').animate({
'top': '-200px'
}, 500, $.bez(bezierEasing));
}, 300);
setTimeout(function() {
$('#details').animate({
'top': '19px'
}, 100, $.bez(bezierEasing));
}, 600);
Create a function:
// adjust your function accordingly...
function animateIt(selector, speed, top) {
setTimeout(function() {
$(selector).animate({
'top': top
}, speed, $.bez(bezierEasing));
}, 600);
}
Instead of using some weird timeOut chain why you don't use TimelineMax from greensock.com.
It's far more advanced and way easier to use.
Just throwing out my version...
function animateEl(selector, css, speed, timer) {
var tmp = parseInt(speed, 10);
if (!isNaN(tmp)) {
speed = tmp;
}
return setTimeout(function () {
$(selector).animate(css, speed, $.bez(bezierEasing)
}, timer);
}
animateEl('#clock', {'marginTop': '-20px' }, 'slow', 100);
animateEl('#submit', { 'top': '-5px' }, 500, , 200);
animateEl('#details', { 'top': '-200px' }, 500, 300);
animateEl('#details', { 'top': '19px' }, 100, 600);
I want to animate the div#w_xxx and the div#w_xxx img at the same time.
They should get bigger and after this they should get to their old width and height.
The problem is, mootools plays all animations at the same time so I cant see the animation and I tried some .chainfunction from mootools but I didnt get it working.
My code looks like this:
$("w_"+current_item+"").set('morph', {
duration: 1000,
transition: Fx.Transitions.Bounce.easeOut
});
$("w_"+current_item+"").morph({
'opacity': '1',
'width': 366,
'height': 240,
'z-index': '100'
});
$$("div#w_"+current_item+" img").set('morph', {
duration: 1000,
transition: Fx.Transitions.Bounce.easeOut
});
$$("div#w_"+current_item+" img").morph({
'opacity': '1',
'width': 366,
'height': 240,
'z-index': '100'
});
$("w_"+current_item+"").set('morph', {
duration: 1000,
transition: Fx.Transitions.Bounce.easeOut
});
$("w_"+current_item+"").morph({
'opacity': '1',
'width': 183,
'height': 120,
'z-index': '100'
});
$$("div#w_"+current_item+" img").set('morph', {
duration: 1000,
transition: Fx.Transitions.Bounce.easeOut
});
$$("div#w_"+current_item+" img").morph({
'opacity': '1',
'width': 183,
'height': 120,
'z-index': '100'
});
You should look at Fx.Elements from MooTools-more: http://mootools.net/docs/more/Fx/Fx.Elements, which has been designed to run multiple animations on a unified timer.
http://jsfiddle.net/dimitar/tC4V4/
// mock your current_item...
var current_item = 1;
var w = document.id("w_" + current_item);
new Fx.Elements($$(w, w.getElement("img")), {
onComplete: function() {
console.log("done");
},
duration: 4000,
transition: Fx.Transitions.Bounce.easeOut,
link: "chain"
}).start({
0: {
'opacity': '1',
'width': 366,
'height': 240,
'z-index': '100'
},
1: {
'opacity': '1',
'width': 183,
'height': 120,
'z-index': '100'
}
}).start({
0: {
opacity: 0
}
});
By the same token, it supports link: chain so you can chain things or wait etc.