ciao a tutti,
sono andrea, un altro neofita nel css e js e per questo qui a chiedervi aiuto.-)
il mio problema, per altro già affrontato in termini simili in un'altra discussione (leggi: la soluzione che veniva li proposta non andava bene x me), è il seguente:

ho la mia homepage con il suo menu. quando clicco su una voce attivo una funzione jquery per mostrare, con un effetto particolare come l'apertura a tendina, di un trafiletto di testo e immagine. Questo trafiletto viene sovrapposto al resto dell'homepage: quel che desidero è di oscurare parzialmente l'homepage dietro al trafiletto sia per motivi estetici sia per inibire l'hover di alcuni elementi presenti nell'homepage che altrimenti restano attivi nonostante il nuovo documento in sovraposizione. Ovviamente, l'opacità dell'homepage deve scomparire quando viene chiuso il trafiletto, cioè quando disattivato il jquery.

spero di potermi essere spiegato il più possibile.-))

grazie!

di seguito il codice dell'effetto jquery usato per il trafiletto e il codice html che lo chiama.


JQUERY


function( $, undefined ) {

$.effects.fold = function(o) {

return this.queue(function() {

// Create element
var el = $(this), props = ['position','top','bottom','left','right'];

// Set options
var mode = $.effects.setMode(el, o.options.mode || 'hide'); // Set Mode
var size = o.options.size || 40; // Default fold size
var horizFirst = !(!o.options.horizFirst); // Ensure a boolean value
var duration = o.duration ? o.duration / 1 : $.fx.speeds._default / 1;

// Adjust
$.effects.save(el, props); el.show(); // Save & Show
var wrapper = $.effects.createWrapper(el).css({overflow:'hidden' }); // Create Wrapper
var widthFirst = ((mode == 'show') != horizFirst);
var ref = widthFirst ? ['width', 'height'] : ['height', 'width'];
var distance = widthFirst ? [wrapper.width(), wrapper.height()] : [wrapper.height(), wrapper.width()];
var percent = /([0-9]+)%/.exec(size);
if(percent) size = parseInt(percent[1],10) / 100 * distance[mode == 'hide' ? 0 : 1];
if(mode == 'show') wrapper.css(horizFirst ? {height: 0, width: size} : {height: size, width: 0}); // Shift

// Animation
var animation1 = {}, animation2 = {};
animation1[ref[0]] = mode == 'show' ? distance[0] : size;
animation2[ref[1]] = mode == 'show' ? distance[1] : 0;

// Animate
wrapper.animate(animation1, duration, o.options.easing)
.animate(animation2, duration, o.options.easing, function() {
if(mode == 'hide') el.hide(); // Hide
$.effects.restore(el, props); $.effects.removeWrapper(el); // Restore
if(o.callback) o.callback.apply(el[0], arguments); // Callback
el.dequeue();
});

});

};

})(jQuery);

HTML

$(function() {
$("#bioeff").hide(); // Hide this at the beginning... but this have to be in the <head></head>
$("#bioshow").click(function(){ // When button1 is clicked do....
$("#bioeff").show("fold", 1000); // ...do THAT
});

$("#biohide").click(function(){
$("#bioeff").hide("fold", 1000);
});