JavaScript: нажатая ссылка должна исчезнуть впечатляюще.

Я запрограммировал скрипт PHP/PostgreSQL/Oracle для внутреннего использования на моей работе, где ссылки отображаются в виде светло-голубых «тегов», которые также можно скрыть щелчком «X» рядом с ними:JavaScript: нажатая ссылка должна исчезнуть впечатляюще.

alt text

Это работает довольно хорошо ГНФАР и мои коллеги уже впечатлил.

CSS-, внешний вид для «метки» Я укравших из Stackoverflow (так как мои собственные навыки CSS/JS очень ограничены, а также Имитация является искренняя форма лести):

a.hide { 
     color:#3E6D8E; 
     background-color: #E0EAF1; 
     border-bottom: 1px solid #3E6D8E; 
     border-right: 1px solid #7F9FB6; 
     padding: 3px 4px 3px 4px; 
     margin: 2px 2px 2px 0; 
     text-decoration: none; 
     font-size: 90%; 
     line-height: 2.4; 
     white-space: nowrap; 
} 

a.hide:hover { 
     background-color: #e7540c; 
     color: #E0EAF1; 
     border-bottom: 1px solid #A33B08; 
     border-right: 1px solid #A33B08; 
     text-decoration: none; 
} 

a.tag { 
     color:#3E6D8E; 
     background-color: #E0EAF1; 
     border-bottom: 1px solid #3E6D8E; 
     border-right: 1px solid #7F9FB6; 
     padding: 3px 4px 3px 4px; 
     margin: 2px 2px 2px 0; 
     text-decoration: none; 
     font-size: 90%; 
     line-height: 2.4; 
     white-space: nowrap; 
} 

a.tag:hover { 
     background-color: #3E6D8E; 
     color: #E0EAF1; 
     border-bottom: 1px solid #37607D; 
     border-right: 1px solid #37607D; 
     text-decoration: none; 
}

сейчас Я хотел бы улучшить свой сценарий несколькими строками JavaScript и , чтобы «теги» исчезли интересным способом, когда пользователь «x» был нажат пользователем (ссылки все равно должны работать, конечно). Может быть, заставить их взлететь или, может быть, даже взорваться? Кто-нибудь есть идея здесь или может поделиться приятным трюком?

Я бы предпочел не использовать jQuery, потому что еще не научился этому.

Спасибо, и я надеюсь на ваше творчество :-) Alex

источник

2010-12-22 Alexander Farber

это, возможно, еще больше впечатлит ваших коллег http://docs.jquery.com/UI/Effects/Explode – Emmett

Это круто, спасибо! Я надеюсь, что больше ответов придет ... (потому что я все еще плохо себя чувствую, когда включаю jQuery только для 1 эффекта). –

Два из ваших заявлений противоречат друг другу - * поскольку мои собственные навыки CSS/JS очень ограничены * и * я бы предпочел не использовать jQuery, потому что я еще не узнал об этом. * - если вы все еще изучаете JS , jQuery имеет более мелкую кривую обучения и поможет вам избежать множества общих головных болей JS. Если вы уже были опытны или экспертом JS-кодера, то, возможно, jQuery не будет полезен для этой задачи. Если бы я был вами, я бы предпочел решения jQuery. – jball

Чистый эффект Javascript Fadeout бы (для не-IE браузеров на данный момент ..)

var hides = document.getElementsByClassName('hide'); 

for (var i = 0 ; i < hides.length; i++) 
{ 
    hides[i].onclick = function(evt){ 
     var el = this.parentNode; 
     el.style.opacity=1; 
     var el_timeout = setInterval(function(){ 
      el.style.opacity -= 0.05; 
      console.log(el.style.opacity); 
      if (el.style.opacity <= 0.05) 
      { 
       el.parentNode.removeChild(el); 
       clearInterval(el_timeout); 
      } 
     },20); 
    } 
}

демо: http://jsfiddle.net/gaby/AkA5C/

Я завернул тег и кнопка из <span></span>, так что вы можете легко настроить таргетинг на оба.

источник

2010-12-22 18:48:37

Удивительный ответ и jsfiddle.net кажется хорошим инструментом –

Хорошо, я поеду с запросом, но спасибо за ваш ответ –

Использование jQuery effects. Легко, черт возьми, и выглядит круто.

источник

2010-12-22 18:30:21

Он специально упомянул, что предпочел бы не использовать jQuery. – Babiker

Но JQuery - это путь. Я проголосую за время и ИСПОЛЬЗУЮ ЭТО! – capdragon

Советуем не использовать яркие «взрывные» эффекты в вашем приложении, в конце дня пользователи используют ваше приложение, потому что оно решает проблему не получать шоу. Если у вас есть эффекты, используйте простые эффекты. Если вы ДОЛЖНЫ использовать такие эффекты, используйте другую технологию, такую как вспышка.

источник

2010-12-22 18:36:36 Babiker

Хорошо, здесь хорошо. Эффект затухания будет приятным и ненавязчивым. Я не должен использовать какие-либо эффекты, но мой скрипт уже имеет вид «web 2.0», поскольку я отображаю ссылки как «теги». Поэтому я думаю, что добавление небольшого эффекта было бы подходящим здесь. –

«Если у вас есть эффекты, используйте простые эффекты», которые включают в себя fade ins/outs и т. Д. ... – Babiker

JavaScript: нажатая ссылка должна исчезнуть впечатляюще.

ответ

Смежные вопросы