user41522 user41522 - 2 months ago 17
jQuery Question

Check if div has opacity of 1 jquery

I am trying to check whether a slide has the opacity of 1 if it does i want to remove a class and then add a class, it works only on the first one currently this is my code .

$(document).ready(function () {

if ($('#slide1').css('opacity') == 1) {
alert("slide1");
$('#slide1 img').removeClass("slider-in");
$('#slide1 img').addClass("slider-come-in");
}

if ($('#slide2').css('opacity') == 1) {
alert("slide2");
$('#slide2 img').removeClass("slider-in");
$('#slide2 img').addClass("slider-come-in");
}

if ($('#slide3').css('opacity') == 1) {
alert("slide3");
$('#slide3 img').removeClass("slider-in");
$('#slide3 img').addClass("slider-come-in");
}

if ($('#slide4').css('opacity') == 1) {
alert("slide4");
$('#slide4 img').removeClass("slider-in");
$('#slide4 img').addClass("slider-come-in");
}

if ($('#slide5').css('opacity') == 1) {
alert("slide5");
$('#slide5 img').removeClass("slider-in");
$('#slide5 img').addClass("slider-come-in");
}
});


this is the jquery for the slider

// Deal with the frontpage image

if (fullPageImage.length > 0) {


//Setup and start frontpage slideshow

fullPageImage.css('background', 'none'); // Remove the fallback background;

fullPageImage.children('.slide').each(function () { // Initialise each slide by setting its background image as the URI container in its data attributes

var $this = $(this),
bgImage = $this.attr('data-src');

$this.css({'background-image' : 'url(' + bgImage + ')'});

});

fullPageImage.cycle(opts);

$('.slide-next').click(function () {

fullPageImage.cycle('next');

});

//Resize functions

sizeBigImage();
$(window).resize(function (e) {

sizeBigImage(); // Resize slide container

});
window.onload = function() { sizeBigImage(); }

// Scroll bind - For repositioning header and automated scrolls
setTimeout(function () {positionHeader();}, 6000);

$(window).scroll(function (e) {
positionHeader();

var newScroll = $(this).scrollTop();

if (newScroll === 0) {
fullPageImage.cycle('resume');
} else {
fullPageImage.cycle('pause');
}


lastScroll = newScroll;
});



Variable declaration / JQ element caching
*/
var mainNav = $('#main_navigation'),
mainHeader = $('#main_header'),
$window = $(window),
fullPageImage = $('#full_page_image'),
opts = {
timeout: 7000, // how often the slides change
speed: 750, // how fast transitions occur
fx: 'fade',
pause: false, // pause when use mouseovers page
fit: 1,
width: '100%',
height: '100%',
slideExpr: '.slide',
pager: '.slider-pager',
onPrevNextEvent: function(isNext, index, slideElement){
if ($(slideElement).css('opacity') == 1) {
$(slideElement).find('img').removeClass("slider-in");
$(slideElement).find('img').addClass("slider-come-in");
}
},
pagerAnchorBuilder: function (index, DOMElement) {

return "<span class=\"icon-record slide-nav\"></span>";

}
},
lastScroll = $(window).scrollTop(),
menuButton = $('#menu_button'),
downButton = $('#down_button');

Answer

Using the jQuery Cycle plugin (great plugin btw) you will probably want to add a slide change event like so:

$('#slider').cycle({
    after: function(currSlideElement, nextSlideElement, options, forwardFlag) {
         $(currSlideElement).find('img').removeClass('slider-come-in');
         if ($(nextSlideElement).css('opacity') == 1) {
           $(nextSlideElement).find('img').removeClass("slider-in");
           $(nextSlideElement).find('img').addClass("slider-come-in");
      }
    },
    //Any other cycle options
});

jQuery Cycle Options

Comments