I am trying to replicate the www.winston.com homepage animation (that with the circles).
But so far I only managed to do THIS ( LINK HERE ) . How should I continue so when i`ll press now on those triangles, some text to appear and disappear according to the information.
I`d appreciate your help.
My jQuery code looks this way:
$("#green-circle").click(function () {
$("#green-circle").animate({
width: "120",
height: "120",
marginTop: "20",
marginLeft: "0"
}, 2000, "linear", function () {
$(this).after("");
}),
$("#blue-circle").animate({
width: "120",
height: "120",
marginTop: "20",
marginLeft: "5"
}, 2000, "linear", function () {
$(this).after("");
}),
$("#green-circle2").animate({
width: "120",
height: "120",
marginTop: "20",
marginLeft: "5"
}, 2000, "linear", function () {
$(this).after("");
});
});
HERE IS MY jsFiddle and HERE IS THE WEBSITE EXAMPLE
You need JQuery .one() function :
http://api.jquery.com/one/
This will allow a function to only be run once.
So what you can do is use the .one() function initially and add a new class or id to the elements, and then have a new function that will run off of the new class that was just added.
This will allow you to use 2 different functions, one for the start and then one afterwards.
Related
I have a website with multiple boxes and I want to create a function for the animations so I don’t have to add them to each hover box as some have different animations included.
For some reason I cannot call the animation in the box, if I copy the function code and place in the box it works fine but can get it working calling it from the function.
function aniIn() {
$(".br-t", this).stop().animate({ "width": "100%" }, 500, "easeOutQuint" ),
}
function aniOut() {
$(".br-t", this).stop().animate({ "width": "0"}, 900, "easeOutQuint" ),
}
$("a#box01").hover(function() {
$("#background").fadeIn(500);
aniIn();
}, function() {
$("#background").stop().fadeOut(900);
aniOut()
});
HTML:
Any help would be great.
TJ.
Try below code:
function aniIn(current) {
$(".br-t", current).stop().animate({ "width": "100%" }, 500, "easeOutQuint" ),
}
function aniOut(current) {
$(".br-t", current).stop().animate({ "width": "0"}, 900, "easeOutQuint" ),
}
$("a#box01").hover(function() {
$("#background").fadeIn(500);
aniIn(this);
}, function() {
$("#background").stop().fadeOut(900);
aniOut(this);
});
I try to implement an image in Titanium which can be rotated and scaled. I managed to make this work properly, but I want to be able to scroll the image around if it is bigger than the imageView. I tried several things including adding eventListeners and using the zIndex to bring the proper view to front but nothing helps. I also experimented with the bubbleParent function without any other result. I hope some of you got an idea how to achieve the desired behaviour.
XML:
<ScrollView id="imageScrollView">
<View id="pictureView">
<ImageView id="picture" ></ImageView>
</View>
</ScrollView>
TSS:
"#imageScrollView": {
top: "0",
left: "0",
height: "120",
width: "47%",
showHorizontalScrollIndicator: "true",
showVerticalScrollIndicator: "true",
maxZoomScale: "5",
minZoomScale: "1",
backgroundColor: "white",
scrollingEnabled: "true",
borderWidth: "1",
zIndex: "1050"
}
"#pictureView": {
top: "0",
left: "0",
height: "100%",
width: "100%",
bubbleParent: true
}
"#picture": {
top: "0",
left: "0",
height: "100%",
width: "100%",
borderWidth: "3",
borderColor: "red",
bubbleParent: true
}
And my js
$.imageScrollView.addEventListener("scroll", function(e) {
Ti.API.info("Triggered event");
});
$.pictureView.addEventListener("scroll", function(e) {
Ti.API.info("Triggered event");
});
After all I finally managed this to work by using this module: TiTouchImageView. If you have any problems importing / using it refer to my other question.
I would like make a image burst to pieces, this animation should continue infinetly. Pls advice on how to proceed with this? Is it possible to use the jquery animate function to achieve this.
Try this,
http://jsfiddle.net/Dripple/AGGrv/.
This makes a fine animation of bursting a balloon.
$("#bubble1").click(function() {
$("#bubble1").stop(true, false);
$(this).hide("explode", {
pieces: 50
}, 250);
});
function animate1() {
$("#bubble1").animate({
"-moz-border-radius": "110px/100px",
"-webkit-border-radius": "110px 100px",
"border-radius": "110px/100px",
height: '100px',
width: '110px',
top: '240px'
}, 1500, animate2());
}
function animate2() {
$("#bubble1").animate({
"-moz-border-radius": "100px/110px",
"-webkit-border-radius": "100px 110px",
"border-radius": "100px/110px",
height: '110px',
width: '100px',
top: '235px'
}, 1500, function() {
$('#bubble1').trigger('mouseover');
});
}
$("#bubble1").mouseover(function() {
animate1();
});
$("#bubble1").mouseout(function() {
$("#bubble1").stop(true, false);
});
When loading a page with the CarouFredSel image cycle it is always shifted a little to the right until I either go to the next image or reload the page, same issue happens after a hard refresh.
$( document ).ready(function() {
$(".photos").carouFredSel({
width: "100%",
height: "465px",
items: {
visible: 1,
width: "variable",
height: "465px"
},
scroll: {
fx: "none",
duration: 1
},
auto: 50000,
prev: {
button: ".prev",
key: "left"
},
next: {
button: ".next",
key: "right"
},
pagination: {
container: ".pagination",
keys: true
},
swipe: true,
mousewheel: true
})
});
http://coreytegeler.com/gl/music/
I've tried posting this several times before and no one has given me any info yet and it's really holding me up, and help would be so greatly appreciated.
I don't think it's a problem with your configuration of CarouFredSel. I made a jsfiddle of your code and it works fine.(http://jsfiddle.net/YdAee/). I'm going to guess it has something to do with your masonry code, but that's just a guess because that is throwing an error. Look at this code:
///////MASONRY/////
if (randomComplete == true) {
$('#boxes').masonry({
itemSelector: '.box'
});
}
randomComplete is defined out of scope.
I would to change the div css style when click, then change to it primary status when click to another.
i used this code but it just rechange it when click on another div,
here the code am trying:
$('.mydiv').click(
function() {
$(this).stop().animate({
width:'960px',
backgroundColor : '#000'
}, 500);
}, function () {
$(this).stop().animate({width:'300px', backgroundColor : "green"}, 300);
});
You're probably looking for the toggle() function :
$('.mydiv').toggle(function() {
$(this).stop().animate({
width: '960px',
backgroundColor: '#000'
}, 500);
}, function() {
$(this).stop().animate({
width: '300px',
backgroundColor: "green"
}, 300);
});
And you need jQuery UI to animate colors ?
FIDDLE
EDIT:
You're probably still looking for the toggle() function, but to animate one div when clicking on another div, stop using the this keyword and target the div you're trying to animate :
$('#someDiv').toggle(function() {
$('.mydiv').stop().animate({
width: '960px',
backgroundColor: '#000'
}, 500);
}, function() {
$('.mydiv').stop().animate({
width: '300px',
backgroundColor: "green"
}, 300);
});
FIDDLE
Try this:
$('.mydiv').click(function() {
$(this).stop().animate({
width:'960px',
backgroundColor : '#000'
}, 500, function() {
$(this).stop().animate({width:'300px', backgroundColor : "green"}, 300);
});
});