Verblassen Kanten von div mit jQuery

Question

Wie kann ich Kanten von div mit jQuery verblassen? Stellen Sie sich ein Karussell mit Bildern vor, die horizontal gleiten. Wie kann ich die linke und rechte Seite ausblenden, so dass Bilder in der Nähe der Ränder allmählich verschwinden.

Ich hoffe, es ist klar. :)

Answer 1

Eine einfache Möglichkeit, um eine Reihe von Divs über die Ränder wie vertikale Streifen mit verschiedenen Deckkraft Ebenen anzuzeigen, den Eindruck von Bildern ausgeblendet zu geben.

Answer 2

Wie Alex sagte, ist der einfachste Weg wahrscheinlich, etwas zu überlagern, um das darunterliegende Div auszublenden. Ich würde jedoch einfach einen png transparenten Farbverlauf verwenden. obwohl

Dies wird nicht leicht innerhalb IE6 arbeiten, aber es gibt immer einen Weg, (persönlich unterstütze ich nicht IE6 mehr):

http://24ways.org/2007/supersleight-transparent-png-in-ie6

Answer 3

Sie können es verwenden, um mehrere divs zu setzen mit abnehmendem Transparenz und setzen das in eine Maske über das Element, das Sie verblassen wollen, wie hier beschrieben: http://www.bennadel.com/blog/1014-Creating-Transparent-Gradients-With-jQuery.htm

Answer 4

ich denke, dies ist die Art der Sache sein könnte, den Sie suchen: http://hunyadi.info.hu/en/projects/sigplus/testsuite/30-sigplus-sliders

Rich

Answer 5

Webkit-Browser (d.h. Chrome und Safari) unterstützen eine CSS-Eigenschaft namens -webkit-mask, mit der Sie ein Element mit einem CSS3-Effekt (d. H. Einem linearen Farbverlauf) überlagern können.

Die folgende Stylesheet-Regel wird ein Verblassen weißen Rand auf Elemente mit der Klasse gilt .mask:

.mask { 
    -webkit-mask: -webkit-linear-gradient(
      left, 
     rgba(255,255,255,0), 
     rgba(255,255,255,1) 5%, 
     rgba(255,255,255,1) 95%, 
     rgba(255,255,255,0) 
    ); 
} 

Leider ist dies wird nur Arbeit in Webkit-basierten Browsern. Wenn Sie alles andere unterstützen möchten (was Sie wahrscheinlich tun), verwenden Sie am besten transparente PNGs.

Answer 6

Sie können versuchen, einen Schatten auf dem div, der die Bilder enthält, oder eine einzelne Pixel breite Box mit einem Anfangsschatten nach links oder rechts zu versuchen. Sie können eine Reihe von Schatten auf die CSS für diese äußeren Elemente anwenden, die von einem sehr transparenten, aber breiten Schatten bis zu einem ziemlich undurchsichtigen Schatten reichen. Sie können diese Schatten auch nur auf eine Seite eines Elements anwenden.

für Einschub: (Sie werden das Overlay größer als der Behälter für die Bilder machen müssen, aber die gleiche Breite und schweben sie overtop, wenn sie die gleiche Höhe ist der Schatten von allen Seiten angezeigt)

#container_overlay{ 
    box-shadow: inset 0px 0px 10px 10px white; 
    z-index:5;// higher than the container with the images 
} 

für ein Element an beiden Enden, verwenden Sie normalen Box Schatten.

#end_overlay{ 
    width:2px; 
    box-shadow: 0px 0px 10px 10px white; 
    z-index:5;// higher than the container with the images 
} 

Schwimmer, die nach links oder rechts, und es sollte auf jedem Browser arbeiten, die Overlay versteht und beliebig ohne Overlay wird es ignorieren. Ich glaube nicht, dass du etwas in diesen Dingen haben musst, also wäre es ein unsichtbares Objekt mit dem Schatten, der herausspringt.

Ich habe gesehen, dass dies verwendet, um den oberen und unteren Bereich von mehreren Magazin-Apps zu ändern, so dass der Text aussieht wie es verschwindet, wie es die Seite verlässt.