I am using the following block of jQuery in my clients wordpress blog:
jQuery(this)
.children(":not('.previewTitle, .previewBody')")
.fadeTo(fadeTime, activeOpacity, function(){
//some code
});
This code fades the parent container (this), but not the two inner containers .previewTitle
and .previewBody
as I would like. This code works in all major browser versions except iOS (5) Safari - does anyone have any idea why iOS has beef with me?
Thanks!
EDIT: Ive checked your test code over a few times, but I really cannot see a difference. Here is my full code:
jQuery(thumbs).hover(
function(){
jQuery(this).children(":not(.previewTitle, .previewBody)").fadeTo(fadeTime, activeOpacity, function(){
//Display Preview Body once faded in
strId = jQuery(this).closest('div').attr('id'); //Get parent DIV ID
jQuery('#previewTitle' + strId.substr(9)).show();
jQuery('#previewBody' + strId.substr(9)).show();
});
},
function(){
// Only fade out if the user hasn't clicked the thumb
if(!jQuery(this).hasClass(clickedClass))
{
//Fade out of thumbnail..
jQuery(this).children(":not(.previewTitle, .previewBody)").fadeTo(fadeTime, inactiveOpacity, function(){
//Hide Preview Body once faded out
strId = jQuery(this).closest('div').attr('id'); //Get parent DIV ID
jQuery('#previewTitle' + strId.substr(9)).hide();
jQuery('#previewBody' + strId.substr(9)).hide();
});
}
});
You don't put the argument to :not
in quotes, just:
jQuery(this).children(":not(.previewTitle, .previewBody)").fadeTo(....
// no quote ----^ no quote ----^
:not
accepts a selector , not a string. I'm intrigued it works on other browsers with the quotes...
Other than that, it should work. It works for me on iOS 4.3.2 (my wife's iPad): Live copy | source
HTML:
<p>Click anywhere in the shaded container:</p>
<div id="container">
<p>Child that will fade</p>
<p>Another that will fade</p>
<p class="previewTitle">previewTitle - won't fade</p>
<p>Another that will</p>
<p class="previewBody">previewBody - won't fade</p>
<p>Another that will</p>
</div>
JavaScript:
jQuery(function($) {
$("#container").click(function() {
$(this)
.children(":not('.previewTitle, .previewBody')")
.fadeTo("slow", "0.2");
});
});
...but I don't have iOS 5 handy to test.
Side note:
This code fades the parent container (this), but not the two inner containers
.previewTitle
and.previewBody
as I would like.
The code you've quoted doesn't fade the parent container at all. It fades all of its children except the two listed. That's not the same thing.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.