So I have got this code
$('.item').click(function () {
if ($(".secondary", this).is(":hidden")) {
$(".primary", this).toggle('slide', {
direction: 'right'
}, 500, function () {
$('.secondary', this).toggle('slide', {
direction: 'left'
}, 500);
});
}
});
Current behavior is that when I click .item, .primary slides to the right, but .secondary doesn't slide in at all.
Fiddle: http://jsfiddle.net/zm3zp6ax/
$('.item').click(function () {
var $this = $(this);
if ($(".secondary", this).is(":hidden")) {
$(".primary", $this).toggle('slide', {
direction: 'right'
}, 500, function () {
$('.secondary', $this).toggle('slide', {
direction: 'left'
}, 500);
});
}
});
DEMO
Related
I disable vertical scrolling on webpage while swiping the carousel horizontally on mobile devices. I'm using the Owl carousel.and I used the solution Disable vertical scrolling while swiping on touch device using owl carousel in my site.it works well but it has a problem and when I see the last side in owl-carousel I can not scroll vertical to anywhere and I have to go back to the prev slide and then it works correctly and I can move on the page. how can solve this issue ? my website is https://khaaspo.com/Product/ProductDeialsInMob?Code=93&Code=93
$(document).ready(function() {
var owl2 = $('.owl-gallery');
owl2.owlCarousel({
rtl: true,
margin: 10,
nav: true,
loop: false,
navSpeed: 1000,
pullDrag: false,
freeDrag: false,
autoplay: false,
onDragged: function () {
$('body').css('overflow', 'auto');
},
onDrag: function () {
$('body').css('overflow', 'hidden');
},
responsive: {
0: {
items: 1
},
400: {
items: 1
},
600: {
items: 1
},
900: {
items: 1
}
},
onTranslate: function () {
$('.owl-item').find('video').each(function () {
this.pause();
this.currentTime = 0;
});
}
});
owl2.on('drag.owl.carousel', function (event) {
document.ontouchmove = function (e) {
e.preventDefault();
}
});
owl2.on('dragged.owl.carousel', function (event) {
document.ontouchmove = function (e) {
return true;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I changed my code like below and it works correctly and I solved my problem.
var owl2 = $('.owl-gallery');
owl2.owlCarousel({
rtl: true,
margin: 10,
nav: true,
loop: false,
navSpeed: 1000,
pullDrag: false,
freeDrag: false,
autoplay: false,
onDragged: function () {
$('body').css('overflow', 'auto');
},
onDrag: function (e) {
var current = e.item.index + 1;
var total = e.item.count;
if (current === total) {
$('body').css('overflow', 'auto');
}
else {
$('body').css('overflow', 'hidden');
}
},
responsive: {
0: {
items: 1
},
400: {
items: 1
},
600: {
items: 1
},
900: {
items: 1
}
},
onTranslate: function () {
$('.owl-item').find('video').each(function () {
this.pause();
this.currentTime = 0;
});
},
});
owl2.on('drag.owl.carousel', function (e) {
var current = e.item.index + 1;
var total = e.item.count;
document.ontouchmove = function (e) {
if (current !== total) {
e.preventDefault();
}
else {
return true;
}
}
});
owl2.on('dragged.owl.carousel', function (event) {
document.ontouchmove = function (e) {
return true;
}
});
I have a column that slides to the left on a click function. I then add the class of w to the container to change its width once the column slides out. What I am trying to do is add the class of e when it slides back in and then remove the class of w by wrapping it in the toggle functions, but the container still contains the class of w and won't add the class of e. Thoughts?
FIDDLE:
http://jsfiddle.net/QDUQk/1926/
.container {
border: 1px solid #000;
width: 200px;
}
.container.e {
width: 80%;
}
.container.w {
width: 100%;
}
<div class="togl">Menu</div>
<div class="col">
SLIDE ME SLIDE ME PLX PLX
</div>
<div class="container">
</div>
$('.togl').click(function() {
if ($('.container').is(':visible')) {
$('.col').toggle('slide', {
direction: 'left'
}, 1000, function() {
$('.container').addClass('w');
$('.container').removeClass('e');
});
} else {
$('.col').toggle('slide', {
direction: 'left'
}, 1000, function() {
$(".container").removeClass('w');
$(".container").addClass('e')
});
}
});
The visibility of .container does not change from true. Check for "w" className at .is()
$('.togl').click(function() {
if (!$('.container').is('.w')) {
$('.col').toggle('slide', {
direction: 'left'
}, 1000, function() {
$('.container').addClass('w');
$('.container').removeClass('e');
});
} else {
$('.col').toggle('slide', {
direction: 'left'
}, 1000, function() {
$(".container").removeClass('w');
$(".container").addClass('e')
});
}
});
jsfiddle http://jsfiddle.net/QDUQk/1927/
Your container visibility does not change on click. Try following,
$('.togl').click(function() {
if ($('.container').hasClass('e')) {
$('.col').toggle('slide', {
direction: 'left'
}, 1000, function() {
$('.container').addClass('w');
$('.container').removeClass('e');
});
} else {
$('.col').toggle('slide', {
direction: 'left'
}, 1000, function() {
$(".container").removeClass('w');
$(".container").addClass('e')
});
}});
I'm trying to create a vertical menu which includes some animation.
I would like the user to hover over part of the the element which triggers the element to expand in width and show some text.
I have had a go at it for the past couple of days but feel i am now just making things worse!
Any help or advice on this would be much appreciated.
here is my fiddle: http://jsfiddle.net/danieljoseph/NZ2QL/3/
Here is the JQuery:
$("nav li").hover(function () {
$("nav li").css('width', 'auto');
});
$("#about-btn").mouseover(function () {
$("#about-btn .tab").animate({
width: "190px"
}, 1000);
});
$("#about-btn").mouseout(function () {
$("#about-btn .tab").animate({
width: "0"
}, 1000);
});
$("#services-btn").mouseover(function () {
$("#services-btn .tab").animate({
width: "190px"
}, 1000);
});
$("#services-btn").mouseout(function () {
$("#services-btn .tab").animate({
width: "0"
}, 1000);
});
$("#work-btn").mouseover(function () {
$("#work-btn .tab").animate({
width: "190px"
}, 1000);
});
$("#work-btn").mouseout(function () {
$("#work-btn .tab").animate({
width: "0"
}, 1000);
});
$("#contact-btn").mouseover(function () {
$("#contact-btn .tab").animate({
width: "190px"
}, 1000);
});
$("#contact-btn").mouseout(function () {
$("#contact-btn .tab").animate({
width: "0"
}, 1000);
});
I'm an amateur when it comes to JQuery so any tips and explanations would be great if possible.
Thanks.
Demo Fiddle
jQuery Code
$("nav li").hover(function () {
console.log($(this).children().children('.tab'));
$(".tab", this).stop().animate({
width: "190px"
}, 1000);
}, function () {
$(".tab", this).stop().animate({
width: "0"
}, 1000);
});
According to me direct children of <ul> must be only <li> so I even changed there position which was wrong in the fiddle you gave...
NOTE: This task could be done using pure css, which would be much lighter
Update Not part of the question:
The same above feature using plain css
I think that's what you really need:
http://jsfiddle.net/NZ2QL/25/
$(".menuItem").mouseover(function () {
var tab = $('.tab[data-id="'+$(this).data('id')+'"]').first();
tab.stop().animate({
width: "190px"
}, 1000);
});
$(".menuItem").mouseout(function () {
var tab = $('.tab[data-id="'+$(this).data('id')+'"]').first();
tab.stop().animate({
width: "0px"
}, 1000);
});
An interesting article that may help:
http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup/
Cheers ;)
What i'd recommend is placing the mouseout events on the .tab classes, and you should get what you want. I'll update your fiddle in a second to show you what i mean.
$("nav li").hover(function () {
$("nav li").css('width', 'auto');
});
$("#about-btn").mouseover(function () {
$("#about-btn .tab").animate({
width: "190px"
}, 1000);
});
$("#about-btn .tab").mouseout(function () {
$("#about-btn .tab").animate({
width: "0"
}, 1000);
});
$("#services-btn").mouseover(function () {
$("#services-btn .tab").animate({
width: "190px"
}, 1000);
});
$("#services-btn .tab").mouseout(function () {
$("#services-btn .tab").animate({
width: "0"
}, 1000);
});
$("#work-btn").mouseover(function () {
$("#work-btn .tab").animate({
width: "190px"
}, 1000);
});
$("#work-btn .tab").mouseout(function () {
$("#work-btn .tab").animate({
width: "0"
}, 1000);
});
$("#contact-btn").mouseover(function () {
$("#contact-btn .tab").animate({
width: "190px"
}, 1000);
$("#contact-btn .tab").mouseout(function () {
$("#contact-btn .tab").animate({
width: "0"
}, 1000);
});
http://jsfiddle.net/NZ2QL/11/
This is a little closer, but still needs some fixing.
That should be what you need. It could be cleaned up a little more to condense the code, but the functionality is what you want, I'm pretty sure.
http://jsfiddle.net/NZ2QL/76/
MY FINAL EDIT:
$(".menuItem li").hover(
function() {
$(this).stop().animate({"width":"250px"}, {queue:false, duration:1000});
$(this).children(".tab").animate({"width":"190px"}, {queue: false, duration:1000})},
function(){
$(this).stop().animate({"width":"60px"}, {queue:false, duration:1000});
$(this).children(".tab").animate({"width":"0px"}, {queue: false, duration:1000})}
);
Modified HTML and css are here:
http://jsfiddle.net/NZ2QL/81/
I have a div width id: "cen", and with a height and width of 50px.
$(document).ready(function() {
$("#cen").animate({
height: 500px,
width: "500px",
}, 5000, function() {
// Animation complete.
});
});
But it's not working.
Put quotes around 500px http://jsfiddle.net/myn9d/
$(document).ready(function () {
$( "#cen" ).animate({
height:"500px",
width:"500px",
}, 5000, function() {
// Animation complete.
});
});
Use this code, it's working:
$(document).ready(function() {
$("#cen").animate({
height: "500px",
width: "500px",
}, 5000, function() {
// Animation complete.
});
});
You have error in your syntax height should be surroung with "500px"
it should be
$(document).ready(function () {
$( "#cen" ).animate({
height:"500px",
width:"500px",
}, 5000, function() {
// Animation complete.
});
});
Please Checkout this demo Demo
$(document).ready(function () {
$( "#cen" ).animate({
height:"500px",
width:"500px",
}, 5000, function() {
});
});
I just want to create the animation like in this website http://www.msambition.de/. I have created 2 divs 1 on other. I have jquery code as below:
$(document).ready(function() {
$('div.unternehmen-ahover').hover(
function () {
$('div.unternehmen-ahover').slideToggle("slow");
$('span.span-picture-menu').fadeIn();
},
function () {
});
$('div.unternehmen').hover(
function () {
},
function () {
$('div.unternehmen-ahover').slideToggle("slow");
$('span.span-picture-menu').fadeOut();
});
});
Te problem is that on hver it works fine but it remains on other div sometimes and does not do slidetoggle. Kindly help me in this regards.
Thanks in advance
You should create mouseenter and mouseleave event handler for your div and there you should slideToggle. See this link.
$(document).ready(function ()
{
$(".tile2").mouseenter(function () {
$(".trainingmood").delay(0).animate({ opacity: 0 }, 300, "");
$(".text2 span").delay(100).animate({ opacity: 1 }, 300, "");
$(".text2").animate({ marginLeft: "-=310px" }, 300);
});
$(".tile2").mouseleave(function () {
$(".trainingmood").delay(0).animate({ opacity: 1 }, 300, "");
$(".text2 span").animate({ opacity: 0 }, 3, 00, "");
$(".text2").animate({ marginLeft: "+=310px" }, 300);
})
});