Kann div border ausgeblendet werden?

7

Ich weiß, dass Sie eine <div> mit jQuery ausblenden können, aber ich frage mich, ob es möglich ist, einen Rahmen für ein <div> auszublenden?

Also ich habe mein <div> :

%Vor%

Und ich möchte nur einige, wie diese Grenze nach 5 Sekunden ausbleichen.

update

Wer dies noch tun möchte, kann das mit CSS3-Übergängen tun.
Vergewissern Sie sich, dass die unterstützte Browser-Funktion aktiviert ist: Ссылка

Beispiel

%Vor%     
Richard Hedges 11.08.2011, 17:54
quelle

5 Antworten

6

Eine echte Fade-Out-Animation würde es erforderlich machen, den Alpha-Kanal zu verwenden. Die Verwendung von rgba() in AFAIK jQuery UI ist sehr fehlerhaft, daher können wir die Eigenschaft step verwenden, um die Deckkraft des Rahmens wie folgt zu ändern:

%Vor%

Ich habe einen schwarzen Rahmen verwendet, damit Sie den Effekt bemerken, aber Sie können ihn in die gewünschte Farbe ändern, zum Beispiel rgba(221,221,221,'+this.alpha+')'); für #DDD

Arbeitsbeispiel: Ссылка

Prost!

BTW, keine Plugins für diesen Ansatz benötigt ...

    
victmo 11.08.2011, 19:34
quelle
10

Sie müssen dafür die jQuery UI verwenden (Farbanimation):

%Vor%

(es funktioniert nicht mit borderColor und für "transparent" wird es sowieso zu weiß)

Ссылка

Plugin mit der gleichen (gleichen?) Fähigkeit:

Ссылка

    
Jacek Kaniuk 11.08.2011 17:59
quelle
4

Ich mag meinen Weg mehr ... & gt;. & gt; Keine Plugins benötigt.

Ссылка

%Vor%


%Vor%     
Joseph Marikle 11.08.2011 18:16
quelle
2

Ich fürchte, es gibt keine saubere 100% ige Arbeitsweise.

  • Sie können die Rahmenbreite animieren, aber das wird nicht "ausgeblendet".
  • Sie könnten die Rahmenfarbe animieren, aber das würde eine zusätzliche Bibliothek über jQuery erfordern, und sie wird auch brechen, wenn Sie den Hintergrund ändern.
  • Sie können den Rand fälschen, indem Sie zwei divs mit einem kleinen Abstand übereinander legen und den äußeren ausblenden, aber das ist nicht wirklich ein Rahmen und wenn Sie etwas ausgefallenes wollen, wie zB dashed oder dotted border, es wird nicht so einfach sein.

Wenn Sie nicht etwas Fantastischeres vorhaben als einen einfachen Rahmen, schlage ich vor, jQuery zu verwenden, um die 2-divs-Lösung zu generieren, und dann das äußere (Rahmen-) div auszublenden. Wie Joes Antwort über mir.

    
Madara Uchiha 11.08.2011 18:13
quelle
1

Die folgende Lösung sollte alle von Ihnen angegebenen Kriterien erfüllen:

Warten Sie 5000 ms (5 Sek.) und animieren Sie dann ein Ausblenden des Rahmens, der 500 ms (0,5 Sek.) dauert.

%Vor%

Arbeitsbeispiel: Ссылка

Da die obige Lösung nicht in der Lage ist, die borderWidth-Fade mit einigen Browsern zu animieren, wäre die einzige andere Art, wie ich mit jQuery das erreichen könnte, was Sie wollen, setTimeout ():

%Vor%

Arbeitsbeispiel: Ссылка

    
RobB 11.08.2011 18:04
quelle

Tags und Links