JQuery - 不要在按钮成功/错误上添加悬停类

时间：2016-03-08 08:53:35

标签： javascript jquery html css

我有一个带有一些JQuery验证和按钮效果的表单。悬停时，“提交”文本移到侧面并显示箭头。单击而不提交表单时，会出现错误（红色按钮），当它成功时，会出现一个带有勾号的绿色按钮，表示谢谢。

我只希望悬停类在没有错误或成功类时运行/工作。

我尝试过使用，但我认为这不是实现这一目标的最佳方法吗？

if ( !$(".contourNavigation").children().hasClass("success") ) {
    return $(this).addClass("hover");
}

JSFiddle

JS：

$(document).ready(function () {
    // JQuery Validate

    // name
    $("#abc6b8ed-5c99-460c-bd80-257747b07466").rules("add", {
          required: true,
          messages: {
            required: "Mandatory"
          }
        }) 

    // email
    $("#dbd7b2e5-6a26-413a-b738-bc7441e4eace").rules("add", {
      required: true,
      messages: {
        required: "Mandatory"
      }
    })  

    // message
    $("#05ce7d9f-b381-4c14-bc37-36f0270fc19a").rules("add", {
      required: true,
      messages: {
        required: "Mandatory"
      }
    })

    //Intercept Submit button in order to make ajax call instead of a postback
    $('#contactForm').preventDoubleSubmission();
});

// jQuery plugin to prevent double submission of forms
jQuery.fn.preventDoubleSubmission = function () {
    $("button").click('submit', function (e) {
        e.preventDefault();

        var $form = $("#contactForm");

        // initialize validate
        $("form").validate();

        // bind to the form and run error function
        $($form).bind("invalid-form.validate", function() {
            if( $("invalid-form.validate") )
            formErrors();
        })

        if ($form.data('submitted') === true) {
            // Previously submitted - don't submit again
        } else {
            if ($form.valid()) {
                // Mark it so that the next submit can be ignored
                $form.data('submitted', true);

                // Make ajax call form submission
                $.ajax({
                    url: $form.attr('action'),
                    type: 'POST',
                    cache: false,
                    data: $form.serialize(),
                    success: function (result) {
                        success();
                    }
                });
            }
        }       
    });

    // keep chainability
    return this;
};

function hover() {
  $(".contour-button").on("mouseenter", function() {
  return $(this).addClass("hover");
  });
}

function hoverOff() {
  $(".contour-button").on("mouseleave", function() {
    return $(this).removeClass("hover");
  });
}

function success() {
    $(".contour-button").addClass("success");
    $(".contour-btn-arrow").addClass("contour-btn-success");
    $(".contour-button .submit").html("Thank you for your enquiry");
}

function formErrors() {
    $(".contour-button").addClass("form-errors");
    $(".contour-btn-arrow").addClass("contour-btn-error");
    $(".contour-button .submit").html("Please complete the form");
}

hover();
hoverOff();

HTML：

<div class="contour australia" id="contour_form_Australia">
  <form method="post" id="contactForm" enctype="multipart/form-data" action="">
    <input type="hidden" value="cNV3XRHLSNF43tj3o69gTg6xQS5fgXFZQpuJyJzhg90VFLl--TuJEeEHFFKzfEhBWYfVbVtXhKEWK8xl89z0NOAk4L88M67NoOfADsNulzQ1" name="__RequestVerificationToken">
    <input type="hidden" value="e3874303-234b-469d-9849-a0fe70f62695" name="FormId" id="FormId" data-val-required="The FormId field is required." data-val="true">
    <input type="hidden" value="1" id="FormStep" name="FormStep">
    <input type="hidden" value="" id="NextStep" name="NextStep">
    <input type="hidden" value="" id="PrevStep" name="PrevStep">
    <input type="hidden" id="RecordId" name="RecordId">
    <input type="hidden" value="" id="PreviousClicked" name="PreviousClicked">
    <div class="contourPage">
      <h4 class="contourPageName"></h4>
      <fieldset class="contourFieldSet">
        <div class="contourField name textfield mandatory">
          <label class="fieldLabel" for="abc6b8ed-5c99-460c-bd80-257747b07466">Name: <span class="contourIndicator">*</span></label>
          <div>
            <input type="text" data-val-required="Name: is mandatory" data-val="true" maxlength="500" value="" class="text" id="abc6b8ed-5c99-460c-bd80-257747b07466" name="abc6b8ed-5c99-460c-bd80-257747b07466">
            <span data-valmsg-replace="true" data-valmsg-for="abc6b8ed-5c99-460c-bd80-257747b07466" class="field-validation-valid"></span></div>
        </div>
        <div class="contourField email textfield mandatory alternating">
          <label class="fieldLabel" for="dbd7b2e5-6a26-413a-b738-bc7441e4eace">Email: <span class="contourIndicator">*</span></label>
          <div>
            <input type="text" data-regex="^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$" data-val-regex="Email: is not valid" data-val-required="Email: is mandatory" data-val="true" maxlength="500" value="" class="text" id="dbd7b2e5-6a26-413a-b738-bc7441e4eace" name="dbd7b2e5-6a26-413a-b738-bc7441e4eace">
            <span data-valmsg-replace="true" data-valmsg-for="dbd7b2e5-6a26-413a-b738-bc7441e4eace" class="field-validation-valid"></span></div>
        </div>
        <div class="contourField company textfield">
          <label class="fieldLabel" for="0fd5e8ed-e9d3-4bf9-825b-7eb3bf73ed46">Company: </label>
          <div>
            <input type="text" maxlength="500" value="" class="text" id="0fd5e8ed-e9d3-4bf9-825b-7eb3bf73ed46" name="0fd5e8ed-e9d3-4bf9-825b-7eb3bf73ed46">
            <span data-valmsg-replace="true" data-valmsg-for="0fd5e8ed-e9d3-4bf9-825b-7eb3bf73ed46" class="field-validation-valid"></span></div>
        </div>
        <div class="contourField phone textfield alternating">
          <label class="fieldLabel" for="7072d283-91f1-4c30-a638-9681ca0fe76f">Phone: </label>
          <div>
            <input type="text" data-regex="/^(?=.*[0-9])[- +()0-9]+$/" data-val-regex="Phone: is not valid" data-val="true" maxlength="500" value="" class="text" id="7072d283-91f1-4c30-a638-9681ca0fe76f" name="7072d283-91f1-4c30-a638-9681ca0fe76f">
            <span data-valmsg-replace="true" data-valmsg-for="7072d283-91f1-4c30-a638-9681ca0fe76f" class="field-validation-valid"></span></div>
        </div>
        <div class="contourField message textarea mandatory">
          <label class="fieldLabel" for="05ce7d9f-b381-4c14-bc37-36f0270fc19a">Message: <span class="contourIndicator">*</span></label>
          <div>
            <textarea data-val-required="Message: is mandatory" data-val="true" cols="20" rows="2" id="05ce7d9f-b381-4c14-bc37-36f0270fc19a" name="05ce7d9f-b381-4c14-bc37-36f0270fc19a"></textarea>
            <span data-valmsg-replace="true" data-valmsg-for="05ce7d9f-b381-4c14-bc37-36f0270fc19a" class="field-validation-valid"></span></div>
        </div>
      </fieldset>
      <div style="display:none" class="contourField">
        <label for="e3874303-234b-469d-9849-a0fe70f62695">Message</label>
        <div>
          <input type="text" name="e3874303-234b-469d-9849-a0fe70f62695" id="e3874303-234b-469d-9849-a0fe70f62695">
        </div>
      </div>
    </div>
    <div class="contourNavigation"> 
      <!-- <div class="g-recaptcha" data-sitekey="6LeOivMSAAAAAGMp47EfxRiGiHhiUSJF7hFuidPV"></div> --> 
      <!-- <input class="submit-btn" type="submit" value="Submit"/> -->
      <button class="contour-button" type="button">
      <div class="submit">Submit</div>
      <div class="contour-btn-arrow">
        <div class="top line"></div>
        <div class="bottom line"></div>
      </div>
      </button>
    </div>
    <div id="formSubmittedMsg"></div>
  </form>
</div>

CSS：

.fieldLabel {
    margin-bottom: 10px;
}

.contourField div input {
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    background: #fff;
    margin: 10px 0;
    border: 1px solid #d5d5d5;
    padding: 10px;
    color: #555;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

/* normal text area */
div.contourField.message.textarea.mandatory div textarea {
    outline: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    margin: 10px 0;
    width: 100%;
    height: 287px;
    border: 1px solid #d5d5d5;
    padding: 10px;
    color: #555;

    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.contourField.textfield {
    width: 45%;
}

.contourField.message.textarea.mandatory {
    float: right;
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
}

@media (max-width: 670px) {
    .contourField.textfield {
        width: 100%;
    }

    .contourField.message.textarea.mandatory {
        float: right;
        position: inherit;
        width: 50%;
    }
    .contourField.message.textarea.mandatory {
        width: 100%;
    }
    div.contourField.message.textarea.mandatory div textarea {
        height: 150px !important;
    }
}

.contourField div input:focus, div.contourField.message.textarea.mandatory div textarea:focus {
    box-shadow: 0 0 5px rgba(243,116,33,0.2);
    border: 1px solid rgba(243,116,33,0.75);
}

.contourField.textfield.mandatory > div {
    position: relative;
}

/* input box validation error */
.field-validation-error {

    -moz-transition: all .3s ease; /* Firefox */
    -webkit-transition: all .3s ease; /* WebKit */
    -o-transition: all 0.3s ease; /* Opera */
    transition: all 0.3s ease; /* Standard */

    font-size: 14px;
    background: #f4d6d6 none repeat scroll 0 0;
    border-bottom: 2px solid red;
    border-left: 1px solid #e3a6a6;
    color: #935656;
    padding: 8px;
    position: absolute;
    right: 1px;
    top: 11px;

    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
}

/* text area validation error */
div.contourField.message.textarea.mandatory div span.field-validation-error {

    top: 35px !important;
    transition: all 0.3s ease 0s;

    -webkit-border-radius: 0 3px !important;
    -moz-border-radius: 0 3px !important;
    border-radius: 0 3px !important;
}

.input-validation-error {

    border: 1px solid #e3a6a6 !important;
    box-shadow: 0 0 5px rgba(277,166,166,0.2);
}

.input-validation-error:hover,.input-validation-error:focus,.input-validation-error:active, {
    border: 1px solid #e3a6a6 !important;
    box-shadow: 0 0 5px rgba(277,166,166,0.2);
}

.contourIndicator {
    color: red;
}

.g-recaptcha {
    margin: 20px 0;
    float: left;
}

#contour fieldset, .contour fieldset {
    padding: 0 !important;
    position: relative;
}

.contourPageName {
    display:none;
}

.contourFieldSet p {
    margin: -10px 0 30px 0;
}

/* .submit-btn {
    background: rgba(0, 0, 0, 0.05) none repeat scroll 0 0;
    border: 1px solid rgba(0, 0, 0, 0.25);
    color: #6a737b !important;
    display: inline-block;
    overflow: hidden;
    padding: 8px 15px;
    transition: all 0.3s ease 0s;
    vertical-align: middle;
    width: auto;
    cursor: pointer;
    margin-bottom: 40px;
    float: right;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

.submit-btn:hover {
    color: #ffffff !important;
    background: #6a737b;
    border: 1px solid rgba(0, 0, 0, 0);
}

.submit-btn-success {
    background: #d6f4d6 none repeat scroll 0 0 !important;
    border: 1px solid #a6e3ac !important;
    color: #569369 !important;
} */

#formSubmittedMsg {
    background: #d6f4d6 none repeat scroll 0 0;
    border: 1px solid #a6e3ac;
    color: #569369;
    padding: 10px;
    margin-top: 50px;
    display: none;
}

.submit-btn-success:hover,.submit-btn-success:focus,.submit-btn-success:active {
    background: #d6f4d6 none repeat scroll 0 0 !important;
    border: 1px solid #a6e3ac !important;
    color: #569369 !important;
}

/**** Button Style/Animation ****/

.contour-button {
    outline: 0;
    background: #3a4247 none repeat scroll 0 0;
    border: 1px solid rgba(0, 0, 0, 0);
    color: #ffffff !important;
    cursor: pointer;
    float: right;
    height: 43px;
    margin-top: 15px;
    margin-bottom: 40px;
    overflow: hidden;
    padding: 10px 15px !important;

    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

/* mozilla only hack */
/* @-moz-document url-prefix() { 
    .contour-button {
        padding: 13px;
    }
} */

/* chrome only hack */
@media screen and (-webkit-min-device-pixel-ratio:0) { 
    .contour-button {
        margin-top: 20px;
        padding: 13px 15px !important;
    }
}

/* ie 8,9,10 only hack */
@media screen\0 {
    .contour-button {
        margin-top: 10px;
        padding: 12px 15px !important;
    }

    .contour-btn-arrow {
        top: -17px !important;
    }
}

.submit,
.contour-btn-arrow {
    /* display: inline-block; */
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.contour-btn-arrow {
    left: 85px;
    opacity: 0;
    position: relative;
    top: -13px;
}

.contour-btn-success {
    left: -34px;
    opacity: 0;
    position: relative;
    top: 54px;
}

.line {
    height: 3px;
    width: 11px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background: #ffffff;
}

.top {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

.bottom {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
    margin-top: 4px;
}

.contour-button:success {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
}

.contour-button.hover .submit {
    -webkit-transform: translateX(-90px);
    -moz-transform: translateX(-90px);
    transform: translateX(-90px);
    opacity: 0; 
}

.contour-button.hover .contour-btn-arrow {
    -webkit-transform: translateX(-70px);
    -moz-transform: translateX(-70px);
    transform: translateX(-70px);
    opacity: 1;
}

.contour-button.success .contour-btn-arrow {
    opacity: 1;
    -webkit-transform: rotate(90deg) translateY(70px);
    -moz-transform: rotate(90deg) translateY(70px);
    transform: rotate(90deg) translateY(70px);
}

.contour-button.success {
    background: #4CAF50;
    padding-left: 50px !important;
    width: 230px;
}

.contour-button.success .submit {
    opacity: 1;
}

.contour-button.success .top {
    width: 19px;
}

.contour-button.success .bottom {
    margin: 7px 0 0 8px;
}

.contour-btn-error {

}

/* if errors */

.contour-button.form-errors {
    background: #c73b3b;
}

1 个答案:

答案 0 :(得分：3)

修改以下css规则，添加：not（）选择器，以避免在成功和出错时应用规则。

结果：jsfiddle 

.contour-button.hover:not(.form-errors):not(.success) .submit  {
 -webkit-transform: translateX(-90px);
 -moz-transform: translateX(-90px);
 transform: translateX(-90px);
 opacity: 0;    
}

.contour-button.hover:not(.form-errors):not(.success) .contour-btn-arrow{
 -webkit-transform: translateX(-70px);
 -moz-transform: translateX(-70px);
 transform: translateX(-70px);
 opacity: 1;
}
相关问题
最新问题