Change opacity of an element during drag with Jquery - javascript

Hi there,
I'm currently working on a slider made with RoyalSlider. In this slider I've got arrows left and right. So, my code, to made it simple, is something like that :
<div class="royalslider">
<div class="slide">Slide Content</div>
<div class="slide">Slide Content</div>
<div class="slide">Slide Content</div>
<div class="arrowleft"></div>
<div class="arrowright"></div>
</div>
The slides are draggable by the mouse, or you can click arrow to go next or previous...
with the API of royalSlider, I can manage, event like this :
slider.ev.on('rsDragStart', function(event) {
// mouse/touch drag start
});
slider.ev.on('rsDragRelease', function() {
// mouse/touch drag end
});
My question is :
I want to animate the opacity of my arrow from 1 (initial state) to 0 when i'm dragging my slides, I mean in relation to the slide position.
eg :
I start dragging my slide, the opacity begin to fadeOut, I stop dragging but don't release my slide, the opacity stop fading, I move the other side, opacity fadeIn....
Is it possible with jquery to do something like this ??
Hope I'm clear :-/
Many thanks
PS: Sorry for my frenglish :)

If your question is about how to handle opacity of the element in jquery, yes you can do it very elegantly.
Here is the API link, http://api.jquery.com/category/effects/fading/
And if you want to play with Fiddle, here it is, http://jsfiddle.net/80kqetf4/
Now coming back to your case, something like below would help,
slider.ev.on('rsDragStart', function(event) {
// mouse/touch drag start
var visibility = <calculate visibility based on slider position>; // 0-min & 1-max
$('selector').fadeTo(1000, visibility);
});
slider.ev.on('rsDragRelease', function() {
// mouse/touch drag end
var visibility = <calculate visibility based on slider position>; // 0-min & 1-max
$('selector').fadeTo(1000, visibility);
});
Of course you could optimize this code further..

Related

strange behaviour while sliding images on carousel

I made a jsfiddle so you can reproduce the bug:
FIDDLE
I implemented a carousel to display 3 images. There's a current image (the image being displayed) and the other two remain hidden until I click one of the lateral arrows, causing the next image to slide from the side overlaying the (now previous) current image.
I've been 2 hours trying to figure out why there are certain specific 'transitions' in which the animation doesn't seem to work. For example, when clicking the left arrow to pass from the first image to the second and from the second to the third the animation works fine, but when clicking it again, the transition from 3 to 1 doesn't perform the slide animation. When moving in the opposite direction (using the right arrow) only one transition is animated. I think the problem has to do with that if in the click event handler function, but couldn't spot what's causing it.
Any help would be greatly appreciated.
TIA
The underlying issue here is related to the z-order of the three images. Your slide animations are only showing up where the image being slid in is above the displayed image; the "broken" transitions are actually occurring, they're just obscured by the "higher" visible image.
You can fix this by explicitly setting the z-index of the new and current image. For example, on the right transition:
prevLandscape.zIndex(1);
currLandscape.zIndex(0);
If you do this, you'll also need to increase the z-index of the arrows so they're above the images.
Fiddle
jsfiddle
The issue is with the hide method you just simply hide it add the slide transition for the hide method.
change this line currLandscape.hide(); to currLandscape.hide("slide");
there seemed to be a problem with the order of the images also. please try this code out. The code is reuse of the previous image arrow code. Just try it out.
$('.arrowRight').on('click',function(e) {
var currLandscape = $(this).siblings(".currImg");
var nextLandscape = currLandscape.nextAll(".hiddenImg").first();
var currDesc= $(".currDesc");
var nextDesc= currDesc.nextAll(".hiddenDesc").first();
if (nextLandscape.length == 0) {
nextLandscape = currLandscape.siblings('.hiddenImg').first();
}
if (nextDesc.length == 0) {
nextDesc= currDesc.siblings('.hiddenDesc').first();
}
nextLandscape.show("slide", { direction: "right" }, 400, function() {
currLandscape.hide("slide");
});
currDesc.fadeOut().removeClass('currDesc').addClass('hiddenDesc');
nextDesc.fadeIn().removeClass('hiddenDesc').addClass('currDesc');
currLandscape.removeClass('currImg').addClass('hiddenImg');
nextLandscape.removeClass('hiddenImg').addClass('currImg');
});

Inverting colours of an image callback in fullpage.js

I've changed the slide arrows to my own png, black arrows but on some slides, which have darker background I want to invert them so they are white.
-webkit-filter: invert(100%);
works just fine, but how to trigger this only on slides that using a callback?
Quick animation of the invert parameter 0% > 100% would be a cool bonus. Thanks.
I didn't know about fullPage.js, but reading through the docs, I found that you can customize a callback that fires when leaving or entering a slide.
I think this is what you want:
jsFiddle - https://jsfiddle.net/ym3snhu4/1/
Notice that I'm only using -webkit-filter to invert the color, so this might not work in other non-webkit browsers. So test this in Chrome, for instance. Otherwise, just add more prefixes to the filter property when adding/removing the style. It depends on how you are changing your arrows, but you can, for instance (with fullPage.js), just change the border-color instead of using filter.
Basically, we are using the afterSlideLoad and the onSlideLeave callbacks to achieve this. Here's the code with the explanation in comments. It's pretty straightforward. My comments are way longer than the code needed, just hoping it's clear.
Example HTML:
<div class="section">
<div class="slide" data-anchor="slide1"> Slide 1 - Index 0 </div>
<div class="slide" data-anchor="slide2"> Slide 2 - Index 1 </div>
<div class="slide slide-dark" data-anchor="slide3"> Slide 3 - Index 2 <br> I'm black </div>
<div class="slide" data-anchor="slide4"> Slide 4 - Index 3</div>
</div>
JavaScript:
// Just take into consideration the callback methods.
// The body selector is the one I used in the jsFiddle, keep whatever you have.
$(document).ready(function() {
$('body').fullpage({
// The name is self explanatory.
// Fires when a a slide has finished loading
// and returns info about the slide.
// This is helpful so we can know when we are on the
// darker slide(s)
afterSlideLoad: function (anchorLink, index, slideAnchor, slideIndex) {
// Notice that in the HTML I set the data-anchor attribute,
// since that can help us be specific about what slide we are in.
// Otherwise, just use the index, which is probably a good idea
// since onSlideLeave doesn't return the slideAnchor parameter,
// for some reason.
// Change the if statement to whatever fits your needs.
// Check what index and/or anchor your darker slides are.
if(slideAnchor === 'slide3' || slideIndex === 2) {
// This adds the invert filter to the controlArrow(s),
// effectively reversing their color WHEN inside of
// this specific slide.
// (In this example, slideIndex 2 with anchor 'slide3').
$('.fp-controlArrow').css('-webkit-filter', 'invert(100%)');
}
},
// This fires when leaving a slide.
// This will be helpful to return the arrows to their
// default color. (When we know we've inverted them beforehand)
onSlideLeave: function (anchorLink, index, slideIndex, direction) {
// We inverted the color of the arrows in slide 3.
// When leaving this slide, we roll them back to their
// original color, by setting the filter to 'none'.
// I don't know why this 'event' doesn't return the
// slideAnchor parameter, so we will just use the index
// in here, which is slideIndex === 2 for 'slide3'.
// Again, change the if logic to fit your needs, i.e. add
// more slides.
if(slideIndex === 2) {
// This removes the filter, arrows go back to their
// original color.
$('.fp-controlArrow').css('-webkit-filter', 'none');
}
}
});
});
And the CSS needed for the smooth transition on filter (change the animation speed to whatever you wish):
.fp-controlArrow {
-webkit-transition: all 500ms;
transition: all 500ms;
}

Need help making jQuery Transit transition repeat

// IGNORE THIS CODE
$(document).ready(function(){
$("#sticky-header").hide();
});
// IGNORE THIS CODE
Here is my code: http://jsfiddle.net/de74ezo5/14/
So what I was trying to achieve here was to make the pink header collapse and stay fixed at the top of the page after scrolling past the top red header. I am using Transit with jQuery to create the transition (http://ricostacruz.com/jquery.transit/). I don't know a more efficient way; Easing doesn't satisfy my needs.
The transition, for some reason, isn't repeating after scrolling back to the top, and then past the red header again.
This is what I need help with:
How do I make the transition repeat after scrolling back to the top, and then past the red header again?
How can I adjust the speed of the transition?
The problem is your sticky-header div's css is getting a transform: rule added to it on initial scroll down. When you scroll back up, this rule remains even though you hide it (which only changes display:block to display:none)
Page Load:
<div id="sticky-header" style="display: none;"></div>
Scroll down:
<div id="sticky-header" style="display: block; **transform**: translate(0px, 60px);"></div>
Scroll back up: You can see transform is still there even though display = none
<div id="sticky-header" style="display: none; **transform**: translate(0px, 60px);"></div>
Scroll back down: Rule already fired, will not re-fire unless removed.
<div id="sticky-header" style="display: block; **transform**: translate(0px, 60px);"></div>
In your else, you need to alter the css and remove that transform rule so that it refires:
$('#sticky-header').css({
"display" : "none",
"transform" : ""
});
Also, side performance note:
Every time your window scrolls below 160px, your transition is fired. You can see here as I keep scrolling lower and lower, the event is repeatedly fired (you can see it ran 6 times as I mouse wheeled down the page)
Add a check in there so .transition is only fired once: You can do this with jQuery data:
$(document).data('scrolled', false);
Full code:
$(document).ready(function() {
$("#sticky-header").hide();
$(document).data('scrolled', false);
});
$(window).scroll(function(){
if( $(document).scrollTop() > 160 ) { // do transition
if (!$(document).data('scrolled')) {
$('#sticky-header').show();
$("#sticky-header").transition({ y: 60 });
$(document).data('scrolled', true);
}
}
else { //show original header
$('#sticky-header').css({
"display" : "none",
"transform" : ""
});
$(document).data('scrolled', false);
}
});
FIDDLE

Fading a <div> With 'onmouseover' and 'onmouseout' Happens Several Times

I have a <div> on my web page that I would like to have an opacity of 1 while you're hovering over it, but when the mouse is not hovering over it I would like it to fade to an opacity of 0.3. My problem is that currently when I hover over the <div> it starts fading in and out several times (rather than just once). I'm not sure if this is why, but I suspect it's because it detects the mouse rolling over the multiple <div>s that are within the one that I set to fade out.
Here is a very simplified segment of my web page to illustrate what I have so far:
<div id="div1">
<div id="div2" onmouseover="fadeElementTo('div1', 500, 1)" onmouseout="fadeElementTo('div1', 500, 0.3)">
<div id="div3">
<div id="div4">
</div>
</div>
<button id="myButton" onclick="doACoolAnimation()" ></button>
</div>
</div>
My fadeElementTo() function is pretty simple:
function fadeElementTo(eid, speed, opacity, callback) {
$("#" + eid).fadeTo(speed, opacity, callback);
}
In case it's relevant, I also have a button that animates the same div by simply moving it left or right when the button is clicked.
function doACoolAnimation() {
var hiddenState = GLOBAL_VAR.hiddenState;
// If the <div> is already hidden, make it visible
if (hiddenState == null || hiddenState == 1) {
GLOBAL_VAR.hiddenState = 0;
$("#div1").animate({
left: "0px"
}, 1500);
}
// Otherwise, hide it
else {
GLOBAL_VAR.hiddenState = 1;
$("#div1").animate({
left: "-800px"
}, 1500);
}
}
Any ideas what might be causing my bug? And better yet, what can I do to fix it?
Try onmouseenter instead of onmouseover and use jQuery to attach/bind those events rather than the attributes so it works the same across all browsers.
$('#outer').mouseenter(function() {
$('#log').append('<div>Handler for .mouseenter() called.</div>');
});
see here
Use mouseenter event to stop event bubbling, and stop method to make sure you clear unfinished animations on that element.
$('#div2').mouseenter(function(){
$('#div1').stop().fadeTo(500,1);
});
It detects the events multiple times. For example, if you want to change the size, going on and off fast changes the size even when the mouse is not on the div. The code needs to exit the program when the mouse is not on the div. To do that, you might include the code in something that kills the code when the mouse is not on top of the div so that the queued fades/animations do not run.
Edit:
Try looking at the JQuery documentation to see if there is anything that you can use.
You might able to use these:

Div is jumpy with fadeIn jQuery

When I roll over .comptext_rollover div it should hide the initial div on the page and show the minipage div. but it does but is sometimes really jumpy and also the minipage div sometimes shows below the initialpage div. any ideas? sorry i am new to coding! Thanks in advance.
$(document).ready(function() {
$('#mini_page').hide();
$('.comptext_rollover').hover(function() {
$('#initial_page').hide();
$('.register_button').hide();
$('#mini_page').fadeIn(100);
$('#container').css({
'margin-top': '-217px'
});
}, function() {
$('#mini_page').hide();
$('#initial_page').show();
$('.register_button').show();
$('#container').css({
'margin-top': '-150px'
});
});
});
I prepared a fiddle demo HERE
re-EDIT:
JSFIDDLE DEMO
(the demo may be incorrect while the main CSS is an external link)
I used:
<div id="container">
<div id="initial_page" class="page">
<div id="playvideo_hoverbutton"></div>
<div class="register_button"></div>
<div id="invisible_register2"></div>
<div id="termsandconditionsapplyshort"></div>
</div>
<div id="mini_page" class="page">
<div id="minicar_animated"></div>
<div id="worth25k"></div>
<div class="register_button"></div>
<div id="invisible_register"></div>
</div>
<!-- THE ROLLOVER IS OUT OF ALL 'PAGES'! -->
<div class="comptext_rollover">
<!--<div id="competition_text"></div>-->
</div>
</div>
$('#mini_page').hide();
$('.comptext_rollover').mouseenter(function() {
$('.page').fadeToggle(400);
});
$('.comptext_rollover').mouseleave(function() {
$('.page').fadeToggle(400);
});
In any case what you should do:
Position absolute the 2 screens you need to 'swap' into a container.
Than what you do:
Position the 'rollover' element outside the 'screens'.
Adjust the marginTop of the bigger image(car image) in the CSS (like I did) to fix the buggy 'jumps'.
IF POSSIBLE: ONLY ONE rollover ACTION ELEMENT!
Fix the margin-top of the car image. (give it a -Npx)
Doing so you don't need to do that stuff with positioning your container -Npx
There is also a simpler way to do the same effect:
you add to BOTH screens a class .swappable, making the second one (CSS)display:none; , and than you just use jQuery toggling just this class.
you've not set a great deal of time for the fade in. you're also just hiding some of the divs which makes the fade in move around depending on where you put them. maybe use slides instead. I have saved an example here: http://jsfiddle.net/kBEUH/
$(document).ready(function(){
$('#mini_page').hide();
$('.comptext_rollover').hover(function () {
$('#initial_page').fadeOut(1000);
$('.register_button').fadeOut(1000);
$('#mini_page').slideDown(1000);
}, function(){
$('#mini_page').slideUp(1000);
$('#initial_page').fadeIn(1000);
$('.register_button').fadeIn(1000);
});
});
if you put a console.log in your hover() function, you'll see hover is firing like crazy. This causes the animation to start over and over again, while moving your mouse.
You could take advantage of the jquery :animated selector:
$('.comptext_rollover').hover(function() {
//enable this line to see the hover event is firing every time your mouse moves
//console.log("hovering")
//if the div is in the middle of an animation, do nothing
if (!$("#mini_page").is(":animated")) {
$('#initial_page').hide();
$('.register_button').hide();
$('#mini_page').fadeIn(100);
$('#container').css({
'margin-top': '-217px'
});
}
}, function() {
//etc
});
EDIT:
Now I think of it, your probably want to use .mouseenter() and .mouseleave() instead of hover()
$('.comptext_rollover').mouseenter(function() {
//your code
}).mouseleave(function() {
//your code
});

Categories