Im just trying to move a div 40% to the left and then back to 0% on a click/toggle... not sure why its not working i have done it before where it works. For some reason this hides the NAV button and doesnt toggle....
Fiddle
jQuery
$("#mobileNav").toggle(function() {
$("#content").animate({ "left" : "40%" }, 500);
}, function() {
$("#content").animate({ "left" : "0%" }, 500);
});
html
<div class="header">
Nav
</div>
<div id="mainContain">
<div id="menu"></div>
<div id="content"></div>
</div>
That version of toggle has been deprecated and removed, now it only hides and shows stuff, but you can create your own toggle functionality :
$("#mobileNav").on('click', function() {
var toggle = $(this).data('toggle'),
dist = toggle ? '0%' : '40%';
$("#content").animate({ "left" : dist }, 500);
$(this).data('toggle', !toggle);
});
FIDDLE
It doesn't look like anything is triggering your animate calls. Try this
var toggle = false;
$("#mobileNav").click(function(){
toggle = !toggle;
if(toggle)
//do animations
else
//reverse the animations
});
Related
On click of a panel (say panel1) I am trying to animate scroll to the newly added panel (panel2) to left side of the screen.
I have tried
windows.location = '#p2' // panel2 id
but that doesn't animate and bluntly takes the focus to the new panel
Here is the JSFiddle .
Note: I am not sure jquery or CSS animations can be done here.
looking for CSS animations
You can do like this:
function addPanel(elemId) {
$('#'+elemId).css('display', 'flex');
$('html, body').animate({
scrollLeft: $('#'+elemId).offset().left
}, 1000, function() {
// Animation complete.
});
}
Working fiddle
You can use jQuery to animate your container so the new panel (panel2) is visible in the view port.
https://jsfiddle.net/wtfc8o2t/6/
function addPanel(elemId) {
document.getElementById(elemId).style.display = 'flex';
$( "#flex-container" ).animate({
left: "-=450"
}, 1000, function() {
// Animation complete.
});
}
I would like to add a menu like the one in this demo site Here
it drops down from the top of the page as you can see and i would like to know if this was done with only CSS3 or .
If someone can show me a simple function so i can go off it that would be nice!
EDIT: ok i found the code snippet for it I think , i still want to know if this is a good way to do it , and if someone can make this more simple, seems like a lot of code just for that
var isUp = false;
var navHeight = $('#navContainer').height();
var hideHeight = navHeight - 50;
$('#arrowLink a').click(function(e){
e.preventDefault();
navHeight = $('#navContainer').height();
hideHeight = navHeight - 50;
$('.tooltip').remove();
if(!isUp){
$(this).find('img').attr('src',template_directory+'/images/menu_hide_arrow_bottom.png');
$(this).find('img').attr('title',showNav);
$( "#navContainer" ).animate({
top: '-='+ hideHeight + 'px'
}, 500, "swing", function() {
isUp = true;
});
}else{
$(this).find('img').attr('src',template_directory+'/images/menu_hide_arrow_top.png');
$(this).find('img').attr('title',hideNav);
$( "#navContainer" ).animate({
top: "0"
}, 500, "swing", function() {
isUp = false;
});
if($('body').hasClass('body_show_content'))
{
$('#mainContainer').fadeIn();
}
}
});`
Yes, it can be done. You can use css transition/keyframes and a click event.
Code
html
<div id="container hidden">Something</div>
css
#container {
postion:fixed;
-webkit-transition: all 2s;
transition: all 2s;
}
.hidden {
top: -25px;
}
js
$('#container').click(function(){
$(this).toggleClass('hidden');
});
Explanation
Your menu is fixed at the top of the page. Whenever you toggle the button that displays/hides it, you can add a css class that changes the position of the element. Because you have transition on the element, it will animate to that new location. This can also be done using keyframes instead of transition to have more control.
css transition
css keyframes
If you want to achieve this using pure css, you need to make use of transition effect. Check out the fiddle which gives a fair idea of something similar.
FIDDLE
I create this rollover with jquery , but no get works animate background mouseover :
<script>
$(function () {
var number_menus=5;
for(i=1;i<=number_menus;i++)
{
if(i%2==0)
{
var p1=1;
$(".web_header_mb_"+i).show(1000).css("background","url(imagenes/botones/head_"+p1+"_up.png)");
$(".web_header_mb_"+i).mouseover(function() {
$(this).css("background-image","url(imagenes/botones/head_"+p1+"_down.png)");
$(this).animate(
{backgroundPosition:"(0 -250px)"},
{opacity:3.0},
{height: 'toggle'},
{duration:2000}
);
});
$(".web_header_mb_"+i).mouseout(function() {
$(this).css("background-image","url(imagenes/botones/head_"+p1+"_up.png)");
});
}
else
{
var p2=2;
$(".web_header_mb_"+i).show(1000).css("background","url(imagenes/botones/head_"+p2+"_up.png)");
$(".web_header_mb_"+i).mouseover(function() {
$(this).css("background-image","url(imagenes/botones/head_"+p2+"_down.png)");
});
$(".web_header_mb_"+i).mouseout(function() {
$(this).css("background-image","url(imagenes/botones/head_"+p2+"_up.png)");
});
}
}
});
</script>
<div id="web_header_menu_boton" class="web_header_mb_1" style="display:none;">1</div>
<div id="web_header_menu_boton" class="web_header_mb_2" style="display:none;">2</div>
<div id="web_header_menu_boton" class="web_header_mb_3" style="display:none;">3</div>
<div id="web_header_menu_boton" class="web_header_mb_4" style="display:none;">4</div>
<div id="web_header_menu_boton" class="web_header_mb_5" style="display:none;">5</div>
When i go mouseover i try get animate background as transition between 2 different backgrounds , but no get
Regards !!! :)
Here is a demo of what I think you are asking for http://jsfiddle.net/d6pQx/32/. Let me know if this works.
I have a slide show that cycles through images, and then above those images I have some text and then two images. What I am wanting to is work out which images I am trying to animate and do so, however I want to have a delay between each animation.
My difficulty is that I have 3 slides, and each slide can have 2 images that need to be animated seperatly to the background, the slides are arranged are arranged based around the users preferences so from a front end point of view, I can never be 100% sure what two images will be grouped together, for that reason, I have written the following,
if($(".current .iphone").length) {
$(".current .iphone").animate({
opacity : 1,
left : "840px"
}, 800);
}
if($(".current .blackberry").length) {
$(".current .blackberry").animate({
opacity : 1,
left : "1119px"
}, 800);
}
if($(".current .samsung").length) {
$(".current .samsung").animate({
opacity : 1,
left : "783px"
}, 800);
}
if($(".current .htc").length) {
$(".current .htc").animate({
opacity : 1,
left : "900px"
}, 800);
}
if($(".current .nokia").length) {
$(".current .nokia").animate({
opacity : 1,
left : "823px"
}, 800);
}
if($(".current .nokia").length) {
$(".current .nokia").animate({
opacity : 1,
left : "823px"
}, 800);
}
And here is my HTML,
<div id="slideshow" role="main" style="position: relative; overflow: hidden; ">
<section data-background="_/images/elements/parralex-1.jpg">
<img src="_/images/iphone-blue.png" alt="iPhone mybunjee" class="iphone foreground phone" />
<img src="_/images/blackberry-pink.png" alt="Blackberry mybunjee" class="blackberry background phone" />
</section>
<section data-background="http://www.samtordoffracing.com/wp-content/uploads/2012/07/Tordoff-14.jpg">
<img src="_/images/iphone-blue.png" alt="iPhone mybunjee" class="iphone foreground phone" />
<img src="_/images/blackberry-pink.png" alt="Blackberry mybunjee" class="blackberry background phone" />
</section>
<section data-background="http://www.samtordoffracing.com/wp-content/uploads/2012/07/Tordoff-14.jpg">
<div class="samsung foreground"></div>
<div class="nokia foreground"></div>
</section>
</div>
Basically what I am doing is trying to work out which images are present in the current slide, and then animate then, however currently both images animate at the same time, and I want to have a random delay between one image being animated and then the next.
Is there a better way to do what I am doing?
You could try something like:
$.each($('#slideshow').find('img'), function(i, img){
if($(img).hasClass('iphone')){
setTimeout(
function(){
$(img).animate({
opacity : .5,
'margin-left' : "+=40px"
}, 800)
}, Math.random() * i *800);
}
if($(img).hasClass('blackberry')){
setTimeout(
function(){
$(img).animate({
opacity : .5
'margin-left' : "-=40px"
}, 800)
}, Math.random() * i *800);
}
});
Anyway here there are some example, look THIS for example.
I coundn't fully understand what are you trying to do but i changed your jQuery structure.
You need to define a trrigger/event for this action, like hover(), or click()
use this for less code:
$('.current').hover(function() {//mouse over event
var currentClass = $(this).children().attr('class');//takes mouse overed element's chlid's class
if($('.current .'+currentClass).length) {
$(".current ."currentClass).animate({
'opacity' : '1',
'left' : '840px'
}, 800);
}
});
if you dont want to define trigger events, you can use each() method with setInterval() for timed animation.
I am new to jquery and am stuck trying to select an image inside a div.
<div class="div-main">
<div class="title"></div>
<div class="description"></div>
<img class="post-thumb" src="img.jpg"/>
</div>
I am trying to make the title and description show only when the the user hovers over the image in the div.
Currently I have it setup so that the animations happen when the div-main is hovered over
$(document).ready(function(){
$(".div-main").hover(
function () {
$(this).children(".title").fadeIn("slow");
$(this).children(".description").fadeIn("slow");
$(".div-main").css({ opacity: 0.1 });
$(this).css({ opacity: 1.0 });
$(this).show();
},
function () {
$(".title").hide();
$(".description").hide();
$(".div-main").fadeIn("fast");
$(".div-main").css({ opacity: 1.0 });
}
);
});
jsBin demo
$(".div-main").hover(
function () {
$(".title, .description", this).fadeTo(300, 1);
$(".div-main").stop().fadeTo(0, 0.3);
$(this).fadeTo(300,1);
},function () {
$(".title, .description").hide();
$(".div-main").stop().fadeTo(300, 1);
});
I have decided to post this as an answer.
$('.div-main > img')
.hover(function(){
$(this).parent().find(".title, .description").fadeIn(); //Title & description
},
function(){
$(this).parent().find(".title, .description").fadeOut();
}
);
To make the description and title fade in and out when you hover over the image, you could do this:
$('.div-main .post-thumb').hover(function(){
$(this).parent().find(".title, .description").stop(true).fadeIn();
},
function() {
$(this).parent().find(".title, .description").stop(true).fadeOut();
});
If the image is normally the only visible content except when hovering, then this might work better because things would remain visible when hovering over the title and description too:
$('.div-main').hover(function(){
$(this).find(".title, .description").stop(true).fadeIn();
},
function() {
$(this).find(".title, .description").stop(true).fadeOut();
});